Как сделать кнопку недоступной для нажатия до заполнения поля?

Question

[Максим]

Добрый день.
У меня есть страница с анкетой, где пользователь может ввести данные.
Выглядит она таким образом:

И вот её код:

<form method="POST" action="mysql.php" id="analytics" class="callback form-order">
<label>
<p>Имя:</p>
<input type="text" name="name" placeholder="Имя" required>
</label>
<label>
<p>Фамилия:</p>
<input type="text" name="surname" placeholder="Фамилия" required>
</label>
<label>
<p>Отчество:</p>
<input type="text" name="second_name" placeholder="Отчество">
</label>
<label>
<p>Телефон:</p>
<input type="text" name="phone" placeholder="Телефон" required>
</label>
<a href="#" class="button button-o btn-hext">Продолжить</a>
<label>
<p>Дата Рождения:</p>
<input type="text" name="birthdate" placeholder="Дата рождения" required>
</label>

Т.е. у меня после нажатия кнопки "продолжить" открываются остальные поля анкеты.
Как мне сделать так, чтобы кнопка "продолжить" не срабатывала, если поля с атрибутом required не заполнены?

Answer 1

[archelon]

на скорую руку такое решение:
вешаем на баттон класс inactive

.inactive {
pointer-events: none;
}

при заполнении проверяем, заполнены ли поля, если да — убираем этот класс

$('#analytics input').keyup(function() {
  var emptyFields = $('#analytics input:required').filter(function() {
    return $.trim(this.value) === '';
  });
  if (!emptyFields.length) {
    console.log('form has been filled');
    $('#analytics .button').removeClass('inactive');
  }
});

Comments

[Максим]

Вот примерно то, что я и искал, спасибо)

Answer 2

[Евгений Оксенчук]

Сделай кнопку инпут сабмитом и код валидацию полей на скрипте, и поставь условие, пока валидацию инпуты не пройдут, кнопка disabled, не дочитал про остальное, тогда сделай проще, убери кнопку дисплей нон, и пока валидацию не пройдут поля, кнопка будет скрыта.
Если сам не хочешь писать скрипт на валидацию, в инете полно шаблонов, просто добавишь условие. Типо, когда валидация тру, то дисплей блок на кнопке