SO fiddle
Test Fiddle mainly for SO Questions
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/overcast/jquery-ui.css">
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js"></script>
<form id="frm" action="" method="get">
<fieldset>
<legend>Validation POC</legend>
<p>
<label for="cname">Name</label>
<em>*</em><input name="cname" class="cname" size="25" />
</p>
<p>
<label for="cemail">E-Mail</label>
<em>*</em><input id="cemail" name="cemail" size="25" />
</p>
<p>
<label for="curl">URL</label>
<em> </em><input id="curl" name="curl" size="25" value="" />
</p>
<p>
<label for="ccomment">Your comment</label>
<em>*</em><textarea id="ccomment" name="comment" cols="22"></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
</form>
CSS
.mandatory {background-color:#edc0c3; border:1px solid #ff0012;}
.success{border:1px solid Green;}
JavaScript
$.validator.addMethod("urlCheck", function (value, element) {
return this.optional(element) || /^[a-zA-Z0-9\-\.]+\.(com|org|net|mil|edu|COM|ORG|NET|MIL|EDU)$/.test(value);
}, "check your url");
$("#frm").validate({
//errorClass: "mandatory",
// validClass: "success",
rules: {
cname: { required: true, minlength: 5 },
cemail: { required: true, email: true },
curl:{urlCheck:true,required:true}
},
messages: {
cname: "",
cemail: ""
},
highlight:function(element,errorClass,validClass){
$(element).removeClass("success").addClass("mandatory");
},
unhighlight:function(element,errorClass,validClass){
$(element).removeClass("mandatory").addClass("success");
}
});