choodo
@choodo

Как отключить кнопку, пока не заполнено поле?

Как отключить (сделать ее disabled) кнопку, пока не заполнено поле в коде ниже?
Или подскажите, что гуглить, чтобы проверить, что поле заполнено в соответствии с маской?

<div class="t-input-group t-input-group_ph" data-input-lid="1495040492013">
	<div class="t-input-title t-descr t-descr_md" data-redactor-toolbar="no" field="li_title__1495040492013" style="">
	Контакты для передачи расчётов
	</div>
	<div class="t-input-subtitle t-descr t-descr_xxs t-opacity_70" data-redactor-toolbar="no" field="li_subtitle__1495040492013" style="">
	Это – единственное обязательное поле. Его необходимо заполнить (телефон), чтобы инженер приступил к расчётам, и мы знали, кому передать рассчитаные варианты и их стоимость
	</div>
	<div class="t-input-block">
		<!-- input -->
		<input type="text" name="phone" class="t-input js-tilda-rule js-tilda-mask " value="" placeholder="+7 (XXX) XXX-XX-XX" data-tilda-req="1" data-tilda-rule="phone" data-tilda-mask="+7 (999) 999-99-99" style="color:#000000; border:1px solid #000000; background-color:#ededed; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;">
		<div class="t-input-error">
		</div>
	</div>
</div>

<div class="t-form__submit">
	<button type="submit" class="t-submit" style="color:#ffffff;background-color:#0acc58;border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;">
		Получить расчёт
	</button>
</div>
  • Вопрос задан
  • 4877 просмотров
Пригласить эксперта
Ответы на вопрос 2
aliencash
@aliencash
Партизан
Для input, который нужно заполнить, добавьте свойство required, тогда форма не будет отправлена пока поле не заполнено.
Если нужно первично проверить правильность заполнения, у input есть свойство pattern, там регулярку надо прописать.
Не надо делать кнопку disabled. После нажатия пользователем на кнопку вы должны отправить все что заполнено на валидацию и указать пользователю на ошибки в заполнении.
Ответ написан
Stalker_RED
@Stalker_RED
if (phoneField.value.length > 5) {
  button.removeAttribute('disabled')
}


https://jsfiddle.net/o8g66ocx/1
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы