Проверка JQuery не запускается

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 ()не останавливать прогресс формы, когда я нажимаю на следующие ссылки.Дело в том, что это вообще не подтверждается.Я использую этот учебник, Что я пропустил?

Answer 1

Я считаю, что причина его остановки в том, что функция .validate () имеет возврат, который останавливает прогрессию.Возможно, было бы лучше выполнить проверку, когда вы отправляете форму или размытие / изменение для каждого из элементов ввода, например так:

$ ('input, select'). Blur (function {$('#LeadForm'). Validate ();});

Таким образом, после изменения или отмены выбора каждого элемента вы снова проверяете форму?

Надеюсь, это поможет!

validate ([опции])

Этот метод устанавливает обработчики событий для отправки, фокусировки, нажатия клавиш, размытия и нажатия для запуска проверки правильностиВся форма или отдельные элементы.Каждый из них можно отключить, см. Параметры onxxx (onsubmit, onfocusout, onkeyup, onclick).focusInvalid фокусирует элементы при отправке неверной формы.

Answer 2

в моем случае есть несколько форм на текущей странице, и я использую:

$('form').validate()  

, что делает jQuery.validate запутанным.

решение: назначить конкретный селектор идентификаторов для вашей формы. например,

$('#my_form_id').validate()

Answer 3

Я верю, что вы хотите сделать это, обернуть ваш $('#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;
});