Многоэтапная проверка

Question

Я работаю с измененной версией формы, найденной здесь .Я просто хочу, чтобы форма не прогрессировала, если информация текущей вкладки неверна.Я также изменил следующие кнопки (изменен тип для отправки, который все еще выполняет форму и вызывает мои сообщения проверки. Я хочу, чтобы пользователи были заблокированы на вкладке, где вещи вводятся неправильно.)

<input type="submit" name="next" class="next action-button" value="Next" />

Любое руководство будет оценено.

Answer 1

Вы не указали, какие поля у вас есть в форме.Предполагая, что есть обычные, такие как текстовые поля, флажки и т. Д., Что вы можете сделать:

1. При загрузке отключите кнопку «Далее».
2. Привязать функцию валидатора к событиям изменения для полей, требующих проверки.
3. Функция валидатора должна проверить все условия, необходимые для вкладки, и, если они все выполнены, включить «Далее»кнопка.Иначе, удерживайте кнопку отключенной.

Пример: JSFiddle

HTML:

<form id="input-form">
<input type="text" id="name">
<input type="number" id="employee-id">
<input type="submit" name="Next" id="next-button" disabled>
</form> 

JS (с использованием jQuery):

function validate() {
    if (validateName() && validateId()) {
    $('#next-button').removeAttr('disabled');
  } else {
    $('#next-button').attr('disabled', 'disabled');
  }
}

function validateName() {
    let name = $('#name').val();
    return name !== '' && !(/\d/.test(name));
}

function validateId() {
    let id = $('#employee-id').val()
    return id !== '' && !(/[a-z]/.test(id.toLowerCase()));
}

$('form > input').keyup(validate);