$.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({
onfocusout:true,
rules: {
cname: {
required: true,
minlength: 3
},
cemail: {
required: true,
email: true
},
curl: {
urlCheck: true,
required: true
}
},
messages: {
cname: {required:"Please enter your name"
,minlength:"There is no name with less than 3 letters"
},
cemail: {required: "Please enter your Email Id"
,email:"Entered Email Id is not valid"
}
,
},
highlight: function(element, errorClass, validClass) {
$(element).removeClass("success").addClass("mandatory");
},
unhighlight: function(element, errorClass, validClass) {
if($(element).hasClass('mandatory')) {
$(element).removeClass('mandatory').addClass('success');
}
}
});
<form id="frm" action="" method="get">
<fieldset>
<legend>Validation POC</legend><br>
<p>
<label for="cname">Name</label><br/>
<input name="cname" class="cname" size="25" />
</p><br>
<p>
<label for="cemail">E-Mail</label><br/>
<input id="cemail" name="cemail" size="25" />
</p><br>
<p>
<label for="curl">URL</label><br/>
<em> </em><input id="curl" name="curl" size="25" value="" />
</p><br>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
</form>
.mandatory {background-color:#edc0c3; border:1px solid #ff0012;}
.success{border:1px solid Green;}