Jquery Validation with custom message

You can validate the HTML form using the Jquery with your custom error message.

This is very easy to implement and require little knowledge of jquery.

The sample code for the jquery validation are:

Copy this part in your head section.

<script src=”http://code.jquery.com/jquery-latest.js”></script>
<script type=”text/javascript” src=”http://view.jquery.com/trunk/plugins/validate/jquery.validate.js”></script>
<style type=”text/css”>
* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; margin-left:20px; vertical-align: top; display:block;}
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
</style>
<script>
$(document).ready(function(){
$(“#commentForm”).validate({
rules: {
name: “required”,
email: {
required:true,
email:true
},
url:{required:true,url:true},
comment:”required”
},
messages: {
email: {
required: ‘Enter this!’,
email: ‘enter valid email’
},
name: {
required: ‘Enter name!’
},
url: {
required: ‘Enter URL!’,
url: ‘Valid url’
},
comment: {
required: ‘Enter Comment!’
}
}
});
});
</script>

Copy this part in your body section.

<form id=”commentForm” method=”get” action=””>
<fieldset>
<legend>A simple comment form with submit validation and default messages</legend>
<table>
<tr>
<td><label for=”cname”>Name</label></td>
<td><em>*</em><input id=”cname” name=”name” size=”25″  minlength=”2″ /></td>
</tr>
<tr>
<td><label for=”cemail”>E-Mail</label></td>
<td><em>*</em><input id=”cemail” name=”email” size=”25″   /></td>
</tr>
<tr>
<td><label for=”curl”>URL</label></td>
<td><em>*</em><input id=”curl” name=”url” size=”25″  value=”” /></td>
</tr>
<tr>
<td><label for=”ccomment”>Your comment</label></td>
<td><em>*</em><textarea id=”ccomment” name=”comment” cols=”22″></textarea></td>
</tr>
<tr>
<td colspan=”2″><input type=”submit” value=”Submit”/></td>
</tr>
</table>
</fieldset>
</form>

Share and Enjoy

  • Facebook
  • Twitter
  • Google Plus
  • Live
  • Delicious
  • Digg
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS
  • Instapaper
  • FriendFeed

Comments