Question

I’ve made some kind of a faux pas in my programming logic. Please evaluate the following:

<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>

The following is the JQuery validator and 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();
});

What i’m unsure of here, is that the validate() method is not stopping the progression of the form when I click on the next/prev links. Matter of fact its not validating at all. I’m utilizing this tutorial, What have I missed?

Answer 1

I believe what you want to do is wrap your $('#LeadForm').validate() in a conditional statement and return true if it validates and false otherwise. Your .next click event could be altered like so

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