Question

I’ve problem with the jQuery validation plugin.

$(document).ready(function() {
$('input:submit').button();

       $('form').validate({
        rules: {
                name: 'required',
            email: {
                required: 'true',
                email: 'true'
            },
            subject: 'required',
            message: 'required'
        },
        messages: {
            name: '<img src="images/icons/bullet_delete.png" />',
            email: '<img src="images/icons/bullet_delete.png" />',
            subject: '<img src="images/icons/bullet_delete.png" />',
            message: ''
        }
    });
});

The name and subject errors are shown when submit button is pressed, but the email error is shown on blur, when the emailfield loses focus. What do I’ve to change so that all errors are shown after the submit button is pressed?

Answer 1

From documentation: http://docs.jquery.com/Plugins/Validation/validate#options

This method sets up event handlers for submit, focus, keyup, blur and
click to trigger validation of the entire form or individual elements.
Each one can be disabled, see the onxxx options (onsubmit, onfocusout,
onkeyup, onclick).

Try:

$(document).ready(function() {
    $('input:submit').button();

    $('form').validate({
        onsubmit   : true,
        onfocusout : false,
        onkeyup    : false,
        onclick    : false,

        rules: {
            name: 'required',
            email: {
                required: 'true',
                email: 'true'
            },
            subject: 'required',
            message: 'required'
        },
        messages: {
            name: '<img src="images/icons/bullet_delete.png" />',
            email: '<img src="images/icons/bullet_delete.png" />',
            subject: '<img src="images/icons/bullet_delete.png" />',
            message: ''
        }
    });
});