Saturday, May 18, 2013

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,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>

  <script>
  $(document).ready(function(){
    $("#myform").validate({
  rules: {
    emailaddr: {
      required: true,
      email: true
    }
  },
  messages: {
    emailaddr: {
 email: "Invalid email format"
    }
  }
});
  });
  </script>
</head>
<body>
<form id="myform">
  <label for="emailaddr">Required, email: </label>
  <input class="left" id="emailaddr" name="emailaddr" />
</form>
</body>
</html>

output:



Done!!

LinkWithin

Related Posts Plugin for WordPress, Blogger...