Jquery проверить в доступной многошаговой форме

Question

Я пытаюсь создать простую многошаговую контактную форму, которая хорошо работает с программами чтения с экрана и использует плагин Jquery Validate на каждом шаге.

У меня есть скрипт, который меняет фокус и объявляет новую страницу для пользователей программы чтения с экрана, которая работает хорошо. Однако у меня возникли проблемы при работе в сценарии проверки. Он работает на шаге 1, но обойден на шагах 2 и 3.

Следующая кнопка также требует двух нажатий вместо одного. Может кто-нибудь сказать мне, где я иду не так? Вот как я настраиваю проверку.

$(".next").click(function() {
var form = $("#contact-multi");
form.validate({
  errorClass: 'help-block',
  highlight: function(element, errorClass, validClass) {
    $(element).closest('.form-group').addClass("has-error");
  },
  unhighlight: function(element, errorClass, validClass) {
    $(element).closest('.form-group').removeClass("has-error");
  },
  errorPlacement: function(error, element) {
    if (element.prop('type') === 'radio' || element.prop('type') === 'checkbox') {
      error.insertBefore(element.parent());
    } else {
      error.insertBefore(element);
    }
  }
});
  if (form.valid() === true) { // If statement here?



  }
});

Работа в процессе здесь:

https://jsfiddle.net/ldigital/8b3rwobk/2/

Answer 1

Использовать мастер форм и плагины проверки jquery

Answer 2

Попробуйте создать каждый раздел в разных формах и вызовите.validate() для каждой формы в разных тегах скрипта. Попробуйте проверить правильные данные формы.