Error handling in jQuery Validation Plugin

Regarding the error handling in jQuery validation plugin, it could be split to the following types of handling.
1. error styleClass
    - highlight the error element
2. error placement
    - field level - placing the error message together with the error element. - errorPlacement
    - form level - placing the error message in screen header or footer. - errorContainer

Now let's go through each of the handling.

1. error styleClass

define the following styleClass,

input.error { background: #FFD2D2; color:#000000; border: 1px solid red; }

and it will produce the following output

jQuery validation plugin localization

The default language for jQuery validation plugin is English.
It could be overridden with the localization js file, eg. es, zh, fr, etc.
Please refer here for the list of supported languages.

To enable languages support, we just need to add other language message js into our webpage (html/jsp/xhtml).
for french

<script type="text/javascript" src="http://jzaefferer.github.io/jquery-validation/localization/messages_fr.js" />

for chinese

<script type="text/javascript" src="http://jzaefferer.github.io/jquery-validation/localization/messages_zh.js" />

Same for other languages, just find the appropriate language js and add the js into the webpage.

How to handle multilingual error messages for jQuery validation plugins

In How to customize error messages for jQuery validation plugin guides us customize error messages for jQuery validation plugin.
But nowadays, multilingual is a requirement for most of the application.
Thus on top of customized messages, we need to provide multilingual support for the error messages.

This article will show an easy way to provide multilingual support for jQuery validation plugin.

The trick is to keep our customized error messages in resource bundle.

Steps:
1.  write the customized error messages in our application's resource bundle. eg, messages.properties
e.g.

invalid_email=Invalid email format

How to use jQuery validation plugin in JSF

jQuery validation plugin is a lightweight, easy to use and powerful validation tool.
But when we want to use it with JSF, some special handling are required for it to work, due to the JSF component's clientId.

In this article, Primefaces 3.5 is used, and solution demonstrated below should be suitable for all other JSF implementations.

Steps:
1. Create the form and components that required validation.

<h:form id="myform">
  <p:inputText id="emailAddr" value="#{user.email}" />
</h:form>

2. If the target project is not JSF (strust, servlet, etc), the following syntax used.

<script>
$(document).ready(function(){
$("#myform").validate({
    rules: {
        emailAddr: {
            email: true
            }
        }
    });
});
</script>

How to customize error messages for jQuery validation plugin

jQuery validation plugin is lightweight and easy to use, the validation rules and error messages are provided by default.
Thus, it's save our time to validate various form fields. eg, credit card, email, etc.
But sometimes, we still customization to it, one of the very common customization is error message.

The option to customize error messages is opened, we can always provide our own error messages.
Here shown a sample for custom error messages.

messages: {
    field: {
        email: "Invalid email format"
    }
}

Complete source,

How to validate multiple form fields with jQuery validation plugin

jQuery validation plugin is a helpful and easy to use validation tool to validate form.
From the examples shown in the jQuery validation plugin official site, we can see the validation on single form field only.
Credit card validation and Email validation with jQuery in my blog are the single form field validation example.
We can actually validate multiple form fields in one shot with jQuery.

Below is the sample syntax to validate multiple form fields with jQuery validation plugin.
COMMA(,) is the separator of multiple form fields.

<script>
$(document).ready(function(){
  $("#myform").validate({
    rules: {
      field1: {
        email: true
      },
      field2: {
        required: true
      },
      fieldN: {
        creditcard: true
      }
    }
  });
});
</script>

Credit Card validation with jQuery

This is a lightweight and easy to implement credit card validation with jQuery.
With jQuery, server processing is not required; and all the complexities are hide.
another way to validate credit card is with regular expression.

There is only 3 steps to validate credit card number with jQuery.

Email Validation with jQuery

There are many ways to validate email address, the most famous way could be regular expression.
and now comes an easiest way, it is jQuery validation.

The benefits to do validation with jQuery are light weight, and jQuery performs client side validation, thus it can improve server performance by reducing server calls, and reduce bandwidth.

There are only three steps to go.