jQuery Validation Plugin – Learn How To Show Custom Messages

Every developer uses validations for HTML forms and it’s 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 the best and simple validation plugin 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 the plugin.

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

In the error placement 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 placeholders inside the text field.

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

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