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&gt;
<script type=”text/javascript” src=”http://view.jquery.com/trunk/plugins/validate/jquery.validate.js”></script&gt;
<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>

Advertisements

One thought on “Jquery Validation with custom message

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s