How to properly initialize the jQuery Validate plugin

Based on time spent at Stack Overflow, there seems to be a popular misconception that the `.validate()` method is how you would directly “validate” or test validity when you submit the form.  This leads to all kinds of clever over-thinking… like wrapping `.validate()` inside of `click` and `submit` handlers,  which then leads to all kinds of problems like having to click twice before validation messages appear or a form submission with no validation at all. This is because the `.validate()` method is only used for initialization of the plugin and can only be called once on DOM ready (or anytime after the form’s markup is created). Any/all subsequent calls to `.validate()` are always ignored.

The plugin works simply and it automatically captures the click of the submit button to prevent a form submission until certain validation rules are satisfied.  I mean, that’s the whole point of the plugin… if you had to create your own `click` handlers and test things manually before submitting, then you might as well not have the plugin at all.

To properly initialize this plugin, all you need to do is call the `.validate()` method within the DOM ready event handler.  This is where you would declare rules, options, or over-ride any callback functions.

$(document).ready(function() { // <- ensure DOM is ready

    $('#myform').validate({
        // your rules, options and callback functions
    });

});

Once properly initialized as above, the plugin will automatically perform validation upon various event triggers such as on `keyup` during data entry, on `focusout` of the field, and on `click` of the submit button, not to mention the events that trigger validation of the `select`, `radio` and `checkbox` elements. It’s only after all validation rules are satisfied that the form will be allowed to submit.

To programmatically check validation you would use the `.valid()` method on the entire form or a single element. For example, let’s say you want to use a link (an anchor element), `<a>`, in place of the `type=”submit”` input/button. This code is only used for illustration as the most semantically correct way to do this is to use a `type=”submit”` `<input>` or `<button>` element.

$('#myLink').on('click', function(e) {
    e.preventDefault();     // <- block the '<a>' default behavior, history, page jump on click, etc.
    $('#myform').valid(); {  // <- triggers validation test of whole form, similar to the test on a submit button click.
});

Bottom line, the `.validate()` method, most typically, only goes inside the DOM ready event handler function to be called once on page load. It only has one purpose, to initialize the plugin on your form and to declare any plugin options during that initialization.