Jquery проверяет доступную многошаговую форму

Я пытаюсь создать простую многоступенчатую контактную форму, которая хорошо работает с программами чтения с экрана и использует плагин 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/