jQuery Validation Plugin – Learn How To Show Custom Messages

Every developer uses validations for HTML forms and its better to use plugins instead of custom validations because this way we will not only save time, but also will have some efficient script.

jQuery Validation plugin is a a best and simple validation plugin which you can use for your projects. In this post I will show you how we can use custom error messages instead of default error messages sent from plugin.

Below HTML code shows a form with 3 fields first name, last name & email address.

In errorPlacement function, we will embed the custom error messages where ever we will want to show them on the form. The following function is showing the text error messages as placeholder inside the text field.

We can highlight the input field on errors and we have highlight: function (), in which we will add a class to the input field with error.

We have defined a css class which we will append to the input field if there is any validation error. It will turns the background color of field into red.

Output:

form-1