Validate Form Twice

Question

Code facts:

1. I am using jQuery
2. Also using the jQuery Validate plugin

Features of my form:

1. I have a form that is split up into two parts. It's all one form but broken up by two large divs
2. The meat of the form (first name, last name, etc) is on the first part.
3. I also have a dynamic table on the first part of the form, so people can register themselves and up to 20 other people.
   
4. Finally, there is a registration code. These codes are only usable up to 20 times. Meaning if one person registers themselves and 19 other people with the registration code test then that's it, test is no longer a usable registration code.

Problem:

Let's say the registration code test has already been used 18 times. So the validator works fine if they register themselves and two more people, it pops up a message saying the limit is exceeded. However if they type in the code test FIRST and then add the two people, it validates the form to true and moves on. Here's the code for the registration code inside the rules for the validator:

regis_code: {
    required: true,
    reg_code: true,         
    remote: { 
        url: "Private/Code_checker.php", 
        data: {
            num: function() {
               return num_rows;
            },
            },
        async: false 
    }
}

So php script works just fine. The thing I need to do is to validate while they are filling out the form BUT ALSO validate right before submitting. The other problem is that the button for the first part of the form is not a submit button, it is just a button that hides the current div and shows the next div (part 2) of the form. How can I validate while they are typing and also validate when they click the button to go to part 2?

Here's the button code along with the validator stuff:

$('.button2').click(function() {
    if(val.form()) {
        $('.box').animate({ height:520, left: '-=50', top: '+=30', width: '-=350' }, 750);
        $('div.box label').animate({width: '-=100%'},500);
        $('#part1').fadeOut('slow', function() {
            $('#part2').fadeIn('slow');
        });
        $('#PaySubmit').fadeIn('slow');
    }
});
var val = $('#everything').validate({...});

Answer 1

Not sure I understood every detail, but you should not be calling .validate() inside of a click handler because .validate() simply reinitializes the plugin on the form every time you click the button, which is not what you want.

.validate() - to initialize the plugin (with options) once on DOM ready.

.valid() - to check validation state (boolean value) or to validate the form at any time.

Change your code to something like this below. The button will not submit the form #everything because, presumably, your .button2 is not a submit button. However, clicking .button2 will check if the form passes its validation and perform the rest of your function if that condition is true.

$(document).ready(function() {

    $('#everything').validate({ // initialize validation plugin once
        // options
    }); 

    $('.button2').click(function() {
        if( $('#everything').valid() ) { // check if form passes validation
            $('.box').animate({ height:520, left: '-=50', top: '+=30', width: '-=350' }, 750);
            $('div.box label').animate({width: '-=100%'},500);
            $('#part1').fadeOut('slow', function() {
                $('#part2').fadeIn('slow');
            });
            $('#PaySubmit').fadeIn('slow');
        }
    });

});

Now, given that useful information above, I think your system would work better if you use two different sets of form tags. You'd have the advantage of different validation options and perhaps more flexibility for your two step system.

Set up .validation() on both forms with their own unique options. Then use a button to check the first one (with no submission), and then leverage a function inside the submitHandler: on the second form to submit both forms. If you don't need/want to submit both forms, you could write a function to capture the values of form 1, copy into hidden input elements and submit those along with form 2.

Something like this...

$(document).ready(function() {

    $('#form1').validate({ // setup form 1 validation but leave out both submitHandler and submit button.
        // options
    });  

    $('#button').click(function() {  // setup button to check validation state of form 1 and reveal form 2 if true.
        if ( $('#form1').valid() ) {
            // do stuff, reveal your other form, etc.
        }
    });

    $('#form2').validate({  // setup form 2 validation and use submitHandler to take care of submission of one or both sets of data.
        // options,
        submitHandler: function(form) {
            $('#form1').submit();  // alternatively copy the values from form 1 and include in form 2's submission
            $(form).submit();      // submit this form (#form2)
        } 
    });

});

Answer 2

You can use the valid() method any time you want (if validate() has been called...), so you can force a validation of the form when you submit the form:

if (!$("#everything").valid()) {
  // do whatever you need to do
  return false;     // cancel the submit
}

You could also attach an event handler to the field where the number of additional people is selected or when you add a new person dynamically and use the same method.

Edit: An alternative to valid() would be to just check the specific form field instead of the whole form:

$("#everything").validate().element("#reg_code");
// assuming that the registration code field has an ID called reg_code