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!

Evan Davis · Accepted Answer · 2012-02-10 22:03:28Z

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.

answered Feb 10, 2012 at 22:03

Evan Davis

36.7k7 gold badges53 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jshbrmn Over a year ago

isn't the ignore parameter already set to ignore hidden or non-visible objects? this especially confuses me because originally, this is what i did. i set all the rules and messages prior to the validation process and it was validating everything (including hidden and non-visible elements) at the same time.

Evan Davis Over a year ago

The default is only to ignore type='hidden' elements; you can update it to include :hidden which is a jQuery extended expression for non-visible elements.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related