Как сделать кнопку продолжить неактивной при незаполненном input?

Question

[dgallyamshin]

Ребята, добрый вечер. Повесил событие на кнопку, чтоб появлялся следующий шаг оформления заявки, а этот исчезал. Так вот теперь не работает у input required, сразу переходит на следующий шаг вне зависимости от обязательно заполнения поля.

Как это избежать?

<input type="text" required>
<button type="button" id="next">Продолжить</button>

$('#next').on('click', () => {
$('#step-1').fadeOut()
$('#step-2').fadeIn()
}

Comments

[dgallyamshin]

<input type="text" required>
<button type="button" id="next">Продолжить</button>

$('#next').on('click', () => {
$('#step-1').fadeOut()
$('#step-2').fadeIn()
}

[Froggyweb]

Твой код по клику на инпут сначала прячет кнопку далее, затем показывает. Вряд ли тебе нужно так.
можно взять готовый скрипт пошаговой формы, либо. валидировать все поля шага, если все поля на данном шаге валидны - снимать атрибут disabled у кнопки далее. Показ и скрытие можно сделать на CSS, хотя скрытие не очень корректно, лучше описать состояние недоступной кнопки на css

ЗЫ я кликнул на инпут и ничего не ввел это нормальное поведение кнопки?

Answer 1

[Yuriy Vorobyov]

Для input'ов, которые нужно заполнить, добавьте свойство required. И еще смените тип кнопки на submit

Comments

[dgallyamshin]

Но разве submit это не отправка всей формы? У меня же там еще шаги заполнения заявки есть

[Yuriy Vorobyov]

Тогда можете сделать так:

<input type="text" name="text" required>
<button type="button" id="next" disabled>Продолжить</button>

const checkLength = function(evt) {
  if (textField.value.length > 1) {
  	button.removeAttribute('disabled')
  }
}

const textField= document.querySelector('input[name="text"]')
const button = document.querySelector('button')
textField.addEventListener('keyup', checkLength)

[Alex]

Yuriy Vorobyov, У кнопок, есть специальное свойство
button.disabled = true

[Сергей delphinpro]

Yuriy Vorobyov,

const checkLength = function() {
  button.disabled = !textField.value.length
}