jQuery understanding - Fire validate on tabbing?

Question

Hey Peeps,

Trying my hand with jQuery. I have this strange situation that i wish to understand. The below script "works", only problem is not exactly the way i want it to.

Currently on page load. If i click on one of the input fields and without entering anything, tab to the next field (i.e press the tab key and go to next field), the validation is not fired. So essentially i can hit two tabs and click the submit button. This goes through (will get caught server side,but kind of defeats the purpose).

If i enter something and then delete it though, it fires the validation and even shows the message correctly.

My questions:

• How do i get the validations to fire as soon as i "exit" the field, meaning if i click inside or get into the field through a tab, and then "leave/exit" that form field, the validation should be fired.

• What's the deal with getting the validation to fire on submit? do i have to put an onSubmit or is there a event handler sort of thingy for validations (this i believe can be solved with a little more intense googling and api reading), but would you be so kind :) ?

  <style type="text/css">
    .style3 {font-size: 14px; font-weight: bold; color: #0099CC; }
    form{margin:0;}
  .error {
      font: normal 10px arial;
      padding: 3px;
      margin: 3px;
      background-color: #ffc;
      border: 1px solid #c00;
  }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"&gt;&lt;/script&gt;
  
  
  <script type="text/javascript"> 
  // jQuery validation
   $(document).ready(function() { 
      $("#advanceValidateform").validate(); 
  }); 
  </script> 
  
  
    <form id="advanceValidateform" name="advanceValidateform" style="margin:0"  action="">     
      <input type="text" id="advanceAmt1" name="advanceAmt1" class="required"  /> <br />
      <input type="text" id="advanceAmt2" name="advanceAmt2" class="required"  /> <br />
      <input type="text" id="advanceAmt3" name="advanceAmt3" class="required"  /> <br />
  </form>
  
  
  <table width="100%" class="hr-table">
      <tr height="1">
          <td colspan="4" align="center" >
              <form action="#" method="POST" >
                  <input type="hidden" name="empno" value="9999" ></input>
                  <input name="submit" type="submit" title="submit the form" value="  Submit and Print  "></input>
              </form>
          </td>
              </tr>
  </table>
  

Answer 1

If you simply tab through it the .change() event is not fired. IF you wish to force this, you can capture the .focus() and use .trigger() to fire the change event.

Answer 2

Hi Mark, would you please elaborate on "IF you wish to force this, you can capture the focus() and use .trigger() to fire the change event?" I'm new to not just JQuery but js/client validation too (I usually just use php - server side) I am going between http://docs.jquery.com/Plugins/Validation/validate#options, Learning JQuery 1.3 and the JQuery Cookbook and just not finding the guidance I need for this. I would like the form to throw an error on required fields as the user tabs by them and not on optional fields.