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

【问题标题】：Validating form wizard using jQuery Form Validator plugin使用 jQuery Form Validator 插件验证表单向导
【发布时间】：2013-12-11 05:52:10
【问题描述】：

我正在尝试让“jQuery 表单验证器”插件 (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>

如果您需要进一步解释或附加代码，请告诉我。

【问题讨论】：

显示您的代码。您说验证有效，但您根本没有显示任何 jQuery 代码。还有，你说的是这个吗？：jqueryvalidation.org
对不起，我说的是这个：formvalidator.net 验证表单调用的函数很简单：$.validate();
请使用插件链接编辑您的 OP，以便清楚我们在说什么。 .validate() 对于其他验证插件也是一样的。

标签： jquery forms validation

【解决方案1】：

可能是一个不好的例子，但就是这样。

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

插件将类“错误”添加到每个验证失败的输入字段。我不确定如何检查该类的字段，然后启用/禁用“下一步”按钮。

【解决方案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
   }
});

【讨论】：