jquery plugin easyvalidate
my jquery plugin easyvalidate
1. short enough
2. easy to use
e.g.
1. short enough
2. easy to use
/* jquery.easyvalidate.js v1.1 Bob Zhu */
$.extend({easyvalidate:{checkError:function(dom){if(dom.find(".error").length==0){$(".form_tip").css("visibility","hidden").html(" ");return true}return false},addError:function(dom){dom.addClass('error');$(".form_tip").css("visibility","visible").html("Please correct the errors below.")},deleteError:function(dom){dom.removeClass('error')}}});(function($){$.fn.easyvalidate=function(options){$.fn.easyvalidate.defaults={Name:/^\D{2,15}$/,Phone:/^[\d -]{8,12}$/,Email:/^([a-zA-Z0-9_\.\-])+\@([a-zA-Z0-9\.\-])+(\.[a-zA-Z]{2,3})+$/,Time:/^[0-2]{1}\d{1}:\d{2}$/,Date:/^\d{2}-\d{2}-\d{4}/};var options=$.extend($.fn.easyvalidate.defaults,options),t=$(this),c=false;function validate(v,d){c=!v.reg?false:!options[v.reg].test(d.val());if(v.required){c=!d.val()||c}else{c=d.val()&&c}if(c){$.easyvalidate.addError(d)}else{$.easyvalidate.deleteError(d);$.easyvalidate.checkError(t)}}return this.each(function(){$.each(options.config,function(i,v){$(i).blur(function(){validate(v,$(this))})});$(this).submit(function(){$.each(options.config,function(i,v){validate(v,$(i))});if(!$.easyvalidate.checkError(t)){return false}else{$("#submit").val("Processing...").attr('disabled','disabled')}})})}})(jQuery);
e.g.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Reservations</title>
<style type="text/css">
label {
display:inline-block;
margin-right:10px;
width:220px;
text-align:right;
color:#cc071e;
vertical-align:top;
line-height:16px;
}
.submit {
color:#cc071e;
margin-left:230px;
}
.form_tip {
color:#cc071e;
font-weight:bold;
margin-left:174px;
padding-left:26px;
background:#fff url('../images/error.png') no-repeat 2px 1px;
visibility:hidden;
}
.error {
border:2px solid #cc071e;
}
.validate span {
font-size:11px;
color:#999;
}
</style>
</head>
<body>
<h1>Reservations</h1>
<p>Please submit your Reservation Request via our online form. Alternatively, please phone us on xxx.</p>
<p class="form_tip"> </p>
<form action="mail.php" method="post" class="validate">
<fieldset>
<p>
<label for="date">Date / Time *</label><input type="text" name="date" id="date" /> /
<input type="text" name="time" id="time" />
</p>
<p>
<label for="number">Number of People *</label><input type="text" name="number" id="number" /> <span>(e.g. 4)</span>
</p>
<p>
<label for="name">Name *</label><input type="text" name="name" id="name" /> <span>(e.g. Tony)</span>
</p>
<p>
<label for="phone">Phone Number *</label><input type="text" name="phone" id="phone" /> <span>(e.g. 0458 798754)</span>
</p>
<p>
<label for="email" id="label_email">Email Address</label><input type="text" name="email" id="email" />
</p>
<p>
<label for="made" class="fs11">Preferred contact method<br />if Reservation made</label><input type="radio" name="made" id="made_phone" checked="checked" value="Phone" />Phone
<input type="radio" name="made" id="made_email" value="Email" />Email
</p>
<p>
<label for="not_made" class="fs11">Preferred contact method if Reservation<br /><strong>NOT</strong> available at requested Date / Time</label><input type="radio" name="not_made" id="not_made_phone" checked="checked" value="Phone" />Phone
<input type="radio" name="not_made" id="not_made_email" value="Email" />Email
</p>
<p>
<label for="info">Further Infomation</label><textarea name="info" id="info" rows="5" cols="40"></textarea>
</p>
<p><input type="submit" value="Submit" id="submit" class="submit" /></p>
</fieldset>
</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
/* jquery.easyvalidate.js v1.1 Bob Zhu */
$.extend({easyvalidate:{checkError:function(dom){if(dom.find(".error").length==0){$(".form_tip").css("visibility","hidden").html(" ");return true}return false},addError:function(dom){dom.addClass('error');$(".form_tip").css("visibility","visible").html("Please correct the errors below.")},deleteError:function(dom){dom.removeClass('error')}}});(function($){$.fn.easyvalidate=function(options){$.fn.easyvalidate.defaults={Name:/^\D{2,15}$/,Phone:/^[\d -]{8,12}$/,Email:/^([a-zA-Z0-9_\.\-])+\@([a-zA-Z0-9\.\-])+(\.[a-zA-Z]{2,3})+$/,Time:/^[0-2]{1}\d{1}:\d{2}$/,Date:/^\d{2}-\d{2}-\d{4}/};var options=$.extend($.fn.easyvalidate.defaults,options),t=$(this),c=false;function validate(v,d){c=!v.reg?false:!options[v.reg].test(d.val());if(v.required){c=!d.val()||c}else{c=d.val()&&c}if(c){$.easyvalidate.addError(d)}else{$.easyvalidate.deleteError(d);$.easyvalidate.checkError(t)}}return this.each(function(){$.each(options.config,function(i,v){$(i).blur(function(){validate(v,$(this))})});$(this).submit(function(){$.each(options.config,function(i,v){validate(v,$(i))});if(!$.easyvalidate.checkError(t)){return false}else{$("#submit").val("Processing...").attr('disabled','disabled')}})})}})(jQuery);
$(function(){
$(".validate").easyvalidate({
// date is required and like 11-06-2011 as default, whose reg was rewrite below like 11-06-11 as Date: /^\d{2}-\d{2}-\d{2}$/
config: {"#date":{
required: true,
reg: "Date"
// time is required and like 11:30 as default
},"#time":{
required: true,
reg: "Time"
// numver is required and reg was defined below like 4, 12 or 3-4 as number: /^\d{1,2}(-\d{1,2})?$/
},"#number":{
required: true,
reg: "number"
// name is required and like tony as default
},"#name":{
required: true,
reg: "Name"
// phone is required and like 0458 798754 as default
},"#phone":{
required: true,
reg: "Phone"
// phone is NOT required and like [email protected] as default
},"#email":{
reg: "Email"
}},
// define reg number
number: /^\d{1,2}(-\d{1,2})?$/,
// rewrite default reg Date
Date: /^\d{2}-\d{2}-\d{2}$/
});
// if at least one of the answer is email, then email should become required
$("input[name=made],input[name=not_made]").click(function(){
var email = $("#email");
if (email.val()=="") {
if ($(this).filter(":checked").val() == "Email") {
// change email as required
$.fn.easyvalidate.defaults.config["#email"].required = true;
// add error style
$.easyvalidate.addError(email);
$("#label_email").html("Email Address *");
} else if ($("input[name=made]:checked").val()!="Email" && $("input[name=not_made]:checked").val()!="Email") {
// change email back as not required
$.fn.easyvalidate.defaults.config["#email"].required = false;
// clear error style
$.easyvalidate.deleteError(email);
// check if clear the error tips
$.easyvalidate.checkError($(".validate"));
$("#label_email").html("Email Address");
}
}
});
})
/* ]]> */
</script>
</body>
</html>