Disable на кнопку пока не заполнены обязательные поля

Question

есть форма в 3 шага с копкой "далее" При нажатии на кнопку выполняю on click

$("#step2").hide()
$("#step3").show()

Есть инпуты с обязательным заполнением required

Мне нужно чтобы кнопка "Далее" была disabled пока не будут заполнены обязательным поля повесил изначально на кнопку disabled Пытаюсь проверять min lenght, если есть то удаляю атрибут disabled все работает, но проблема в том что инпутов несколько с обязательным заполнении, а оно открывает кнопку если заполнен один, не могу создать условие для всех 4-х полей. реализовать нужно c помощью jQuery Помогите пожалуйста. Спасибо

Answer 1

Если я вас правильно понял то вот так.

$(document).ready(function() {
  $('.field input').on('keyup', function() {
    let empty = false;

    $('.field input').each(function() {
      empty = $(this).val().length == 0;
    });

    if (empty)
      $('.actions input').attr('disabled', 'disabled');
    else
      $('.actions input').attr('disabled', false);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>


<!-- begin snippet: js hide: false console: true babel: false -->






<div class='form'>
  <form>
    <div class='field'>
      <label for="username">Username</label>
      <input id="username" type="text" />
    </div>
    <div class='field'>
      <label for="password">Password</label>
      <input id="password" type="password" />
    </div>
    <div class='actions'>
      <input type="submit" value="Login" disabled="disabled" />
    </div>
  </form>
</div>

Answer 2

Вопрос решен, всем спасибо

    function checkFormstep1() {
    let lastName = $('#lastName').val();
    let firstName = $('#firstName').val();
    let numberPhone = $('#phone').val();

    if (checkNumber === false) {
        $('.success').empty()
        $('.errors').text('Номер не проверен')
    } else if (checkNumber === true && lastName && firstName && numberPhone) {
            $("#step1").hide()
            $("#step2").show()
            $('.errors').text('')
    } else {
        $('.success').empty()
        $('.errors').text('Заполните все данные')
    }
}

Решил вопрос немного по другому, на кнопку повесил функцию, с условиями что поля должны быть заполнены, если НЕТ то выдаем тест с ошибкой, если все ок пускаем пользователя на следующий шаг.

БЛОГ НА HUSL

Disable на кнопку пока не заполнены обязательные поля

Ответы (2 шт):