Проверка шаблона формы с помощью jQuery Form Validator plugin

Question

Я пытаюсь получить плагин «jQuery Form Validator» (http://formvalidator.net/), чтобы хорошо играть с моим мастером формы. Мне нужно, чтобы каждый шаг мастера был проверен после нажатия кнопки «Далее» и теперь позволяет пользователю перейти к следующему шагу или отправить форму без прохождения проверки проверки.

Мой код:

<form> 
<div class="form-wizard"> 
<input fields> 
</div> 

<div class="form-wizard"> 
<input fields> 
</div> 

<div class="form-button-bar"> 
<button class="btn btn-default btn-small form-wizard-previous" id="previous"><i class="icon-circle-arrow-left"></i> Previous</button>&nbsp; 
<button class="btn btn-success btn-small form-wizard-next" id="nextbutton"><i class="icon-circle-arrow-right"></i> Next</button> 
<button class="btn btn-success btn-small form-wizard-submit form-submit-ajax" id="formSubmitAjax"><i class="icon-external-link"></i> Submit</button> 
</div> 
</form> 

поля проверяются, если я общаюсь с ними (так проверка работает), но я до сих пор в состоянии нажать на кнопку «Далее», чтобы перейти к следующему шагу.

Код, используемый для проверки полей просто:

<script> 
$.validate(); 
</script> 

Пожалуйста, дайте мне знать, если вам потребуется дополнительная объяснения или дополнительный код.

Answer 1

Возможно, это плохой пример, но вот он.

function doValidate() { 
     $("form").submit(function() { 
      var validationResult = validateSomething(); 
      if (!validationResult) 
      { 
       return false; 
      } 
      return true; 
     }); 
}; 

Answer 2

Вам необходимо отделить формы или добавить поле игнорирования к шагам, которые еще не выполнены. Я предполагаю, что следующий - это не «отправить», чтобы он не был отключен.

можно также добавить класс к каждому разделу и искать тех, с ошибкой, если все они действительны, включите кнопку

Answer 3

Вы должны отделить формы мастера в отдельные формы. Например,

<div class="form-wizard"> 
    <form id="frm1" name="frm1"> 
     <input fields> 
    </form> 
</div> 
<div class="form-wizard"> 
    <form id="frm2" name="frm2"> 
     <input fields> 
    </form> 
</div> 

Действие код кнопки Далее:

$("#nextbutton").click(function(){ 
    // $currentStep to keep track which form to validate 
    // use .validateForm() function in "jQuery Form Validator" plugin 
    // accept arguments language and config 

    if ($currentStep == 1){ 
     $result = $('#frm1').validateForm(); 
    } 
    else if ($currentStep ==2){ 
     $result = $('#frm2').validateForm(); 
    } 

    if (!$result){ 
     //Stop Navigate to Next Step 
    } 
});