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

您必须将表单分开，或者在尚未采用的步骤中添加ignore字段。我猜下一个不是“提交”所以它没有被禁用。

您还可以为每个部分添加一个类并查找有错误的部分，如果它们都有效，则启用按钮

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
   }
});

使用jQuery Form Validator插件验证表单向导

3 个答案: