With Jörn Zaefferer’s jQuery Validate plugin, validating forms is a superbly easy!

I wanted to display error messages generated by the plugin in an alert box, as well as within the label tags it generates.

The below gist shows exactly how the jquery validation “alerts” the user that a field is not correctly validated.

Hope this helps your jQuery form validation!

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

var validator =
    //replace #myformid with the id attribute of your <form>
    jQuery("#myformid").validate({
        onfocusout: false,
        onkeyup: true,
        onclick: true,
        focusInvalid: true,
        rules: {
            //replace with your fields 
            field-id: "required" 
        },
        messages: {
            //replace with your error message
            field-id: "This field is required" 
        },
        errorPlacement: function(error,element){ 
            error.insertAfter(element); 
            alert(error.html()); 
        },
        showErrors: function(errorMap, errorList){ 
                this.defaultShowErrors();
        }
    });

→ See Github Gist