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-коммутатор:

$('#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(); 
}); 

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

Этот способ после того, как каждый элемент изменен или отменен, вы снова подтверждаете форму.

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

Validate ([параметры])

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

Answer 3

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

$('form').validate() 

, что делает jQuery.validate запутаться.

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

$('#my_form_id').validate()