jQuery Validate: How-to Show Alert Box(s) with Regular Validation & Input Focus.

With the 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. And 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! 

var validator = 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();
                       }
     });

Here’s the GitHub gist.