Question

I am using the jquery validation plugin to validate a form. I have the form broken up into tabs and you are only able to navigate to the next tab when you click the next button. Durring the onclick event for that next button I would like to make sure the current tab has no errors.

The tabs are marked by a class form_group. A default tab html looks like:

<div id="tab-1" class="form_group">
    <div>
      <label for="name">Your Name:</label>
      <input id="ins_name" type="text" name="name"  maxlength="40" />       
    </div>

    <a class="next-tab mover" rel="2" href="#">Next Step »</a>
</div>

Once it is validated by a onfocusout event the input is given a class of either “valid” or “error”

I have tried numerous methods to try and find out when clicking on that next tab button whether or not the current tab has an input with the class “error” but have not been able to figure that out.

Here is my latest try.

 $('.next-tab, .prev-tab').click(function() {
    if ($(this).find('input.error')) {
               alert('error present');
               return false;
    }

    $tabs.tabs('select', $(this).attr("rel"));
       return false;
 });

Can anyone help me out with telling if a div has an input with that error. One of my problems is that $this is using the .next-tab element. I have tried to select the closest “form_group” class with no luck either.

Answer 1

It helps if you post the current, undesirable behaviour of the script (e.g. it changes tabs even when there are errors/it never changes tabs even when the fields are valid).

Anyway, I believe you want something like this:

$('.next-tab, .prev-tab').click(function(e) {

  if ($('.form_group input.error').length > 0) {
    alert('error present');
    e.preventDefault();
  }

Note that .preventDefault() is generally preferred over return false for preventing the default behaviour of an event:

http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/