jquery validation (using jquery validate plugin) - activating validation rules for specific elements based on the button clicked

Question

Ok so, I've run into an annoying issue here. I've learned in my research that using validate() more than once does not work. So I've set up a function that responds to the onclick of certain buttons clicked. These buttons send a parameter to identify which elements to validate. I am doing this because I am using .fadeOut()/.fadeIn() to seamlessly move from section to section. Once you click the first section button (which brings you to the second section) it validates the elements in the first section, if the first section is deemed 'valid' then it proceeds to fadeOut/fadeIn to section b....and so on.

The problem is, although I have set up the rules and messages for section a and b, section b still does not seem to be validating.

Here is my code -

  function validation(page) {
var rules;
var messages;
var validator;

if (page == 'secA') {
    rules = {
        /*gneral information validation*/
        gCompanyTxt: {
            required: true,
            minlength: 2
        }

    messages = {
        /*general info validator messages*/
        gCompanyTxt: {
            required: "The 'Company' text box is empty safgadfgad",
            minlength: "The 'Company' text box needs to have at least 2 characters"
        }
    };

    validator = new jQueryValidatorWrapper("form1", rules, messages);

} else if (page == 'secB') {
    rules = {
        txtFirst: {
            required: true,
            minlength: 2
        }
    };

    messages = {
        txtFirst: {
            required: "Your first name is required",
            minlength: "Your first name needs to be at least two characters"
        }
    };

    validator = new jQueryValidatorWrapper("form1", rules, messages);

}

if (!validator.validate()) {
    return;
} else {
    if (page == 'secA') {
        $('#secA').hide();
        $('#secB').fadeIn('slow');
    } else if (page == 'secTwo') {
        $('#secB').hide();
        $('#secC').fadeIn('slow');

    }
}
}

The buttons are as such:

 <button type = "button" class="buttonSale" id="btnA" onclick="validation('secA')">Proceed to Section B</button>

 <button type = "button" class="buttonSale" id="btnB" onclick="validation('secB')">Proceed to Section C</button>

The result of this is - when click on 'btnA' the code works effectively, if things are empty or incorrect, the validation fires and I am able to fix this and then move on. However, once I am in section b and click the 'btnB', it merely moves on to the next page and seemingly skips the if statement:

if (!validator.validate()) {
    return;
}

I think I am just missing something really simple here, but I am tired of looking at it and need to focus on other things. Thanks!

Answer 1

Is this using jQuery.Validate? If so, it will only validate the elements visible on the screen, so you shouldn't have to do any special logic to change the rules. Just assign all your rules at once and make sure it ignores hidden inputs.

Once that's done you can bind the click event on each button to check the validation state of the form using $(yourForm).validate().form() and page to the next panel if it comes back true (valid). The last button in your flow should actually submit.