How to run jquery validate() while using form wizard?

Question

I am using the jQuery Form Wizard 3.0.4 plugin for a multistep registration process. It uses the jQuery validator plugin built in, which is working fine when going from step to step. EDIT: This means I am already using validationEnabled: true, formOptions, and validationOptions, and these are working. I need to run this same validation outside of the regular functionality.

The problem is that I need to run the validator and show errors manually at two points. For a special field I have, and before an AJAX submission. I've tried the following, which does nothing:

$("#registrationForm").validate();  

The form wizard script (jquery.form.wizard-3.0.4.js) appears to be doing this when going to the next step:

this.element.validate().focusInvalid();

So I tried this, which also does nothing:

$("#registrationForm").element.validate().focusInvalid();

Any ideas?

1. How do I run the same validation that occurs when I click next step?
2. How would I call a function that validates and shows errors for a specific field?

Answer 1

I think the example code below should probably work for you, the validation is triggered when the button or element with id="validate_form" is clicked. This is basically the code that is run (in the plugin) when the user clicks next.

    $(function(){
        $("#validate_form").click(function(){ // when the button is clicked...
            var wizard = $("#demoForm"); // cache the form element selector
            if(!wizard.valid()){ // validate the form
                wizard.validate().focusInvalid(); //focus the invalid fields
            }

        })
    })

If you would just need to validate one single input field then you could use the following code (the button with id="validate_email" is clicked in this case):

    $(function(){
        $("#validate_email").click(function(){ // when the button is clicked...
            var wizard = $("#demoForm"); // cache the form element selector
            if(!wizard.validate().element( "#myemail" )){ // validate the input field
                wizard.validate().focusInvalid(); // focus it if it was invalid
            }

        })
    })

Hope this helps.

/Jan