Question

我在编程逻辑中做了某种 faux pas 。请评估以下内容：

<form id="LeadForm" method="post" action="">
  <div id="lead_form_step_1">
  <asp:Label ID="lblProgramOfInterest" class="lead_form" runat="server" Text="Program of Interest"></asp:Label><asp:DropDownList ID="ddlProgramOfInterest" runat="server"></asp:DropDownList>
  <p />

  <span class="next">Next &gt;&gt;</span>
  </div>

  <div id="lead_form_step_2">
  <div class="lead_form">First Name:<input type="text" id="NameFirst" class="required" minlength="2"/></div>
  <div class="lead_form">Last Name:<input type="text" id="NameLast" /></div>
  <div class="lead_form">Address:<input type="text" id="AddressLine1" /></div>
  <div class="lead_form">Address:<input type="text" id="AddressLine2" /></div>
  <div class="lead_form">City:<input type="text" id="AddressCity" /></div>
  <div class="lead_form">State:<input type="text" id="AddressState" /></div>
  <div class="lead_form">Zip Code:<input type="text" id="AddressZip" /></div>
   <p />
  <span class="prev">&lt;&lt; Previous</span>&nbsp;&nbsp;<span class="next">Next &gt;&gt;</span>
  </div>

  <div id="lead_form_step_3">
  <div class="lead_form">Email:<input type="text" id="EmailAddress" /></div>
  <div class="lead_form">Phone:<input type="text" id="HomePhone" /></div>
  <div class="lead_form">Mobile:<input type="text" id="MobilePhone" /></div>
  <div class="lead_form">Inquired Before:<input type="checkbox" id="InquiredBefore" /></div>
  <br /><span class="prev">&lt;&lt; Previous</span> &nbsp;<span class="leadsubmit">Submit</span>

 </div>
 </form>

以下是JQuery验证器和div-switcher：

$('#lead_form_step_2 .prev').click(function (event) {
    $('#LeadForm').validate();
    $('#lead_form_step_2').hide();
    $('#lead_form_step_1').show();
});

$('#lead_form_step_2 .next').click(function (event) {
    $('#LeadForm').validate()
    $('#lead_form_step_2').hide();
    $('#lead_form_step_3').show();
});

我在这里不确定的是，当我点击下一个/上一个链接时，validate（）方法并没有停止表单的进展。事实上它根本没有验证。我正在使用this教程，我错过了什么？

Answer 1

我相信你要做的是将$('#LeadForm').validate()包装在条件语句中，如果验证则返回true，否则返回false。你的.next点击事件可以像这样改变

$('#lead_form_step_2 .next').click(function (event) {
 if($('#LeadForm').validate())
 {
 $('#lead_form_step_2').hide();
 $('#lead_form_step_3').show();
 }
 else return false;
});

Answer 2

我认为它停止的原因是因为.validate（）函数有一个停止进展的返回。也许在提交表单时执行验证或者对每个输入元素进行模糊/更改会更好吗？

$（'input，select'）。blur（function { $（ '＃LeadForm'）验证（）。 }）;

这样在更改或取消选择每个元素后，您是否再次验证表单？

希望这有帮助！

验证（[选项]）

此方法为提交，焦点，键盘，模糊和单击设置事件处理程序，以触发整个表单或单个元素的验证。每个都可以被禁用，请参阅onxxx选项（onsubmit，onfocusout，onkeyup，onclick）。 focusInvalid在提交无效表单时关注元素。

Answer 3

在我的情况下，当前页面中有多个表单，我正在使用：

$('form').validate()

这让jQuery.validate感到困惑。

解决方案：为表单指定一个指定ID选择器。 e.g。

$('#my_form_id').validate()

JQuery验证不会触发

3 个答案: