HTML
<ul class="form">
<li id="username_li" class="validated">
<label for="r_username">Username:</label>
<div id="username_img"></div>
<input type="text" value="" maxlength="20" id="username" name="username" class="validated">
<div id="username_msg"></div>
</li>
<li id="password_li" class="validated">
<label for="r_password">Password:</label>
<div id="password_img"></div>
<input type="password" maxlength="20" id="password" name="password">
<div id="password_msg"></div>
</li>
<li id="password_copy_li" class="">
your password is <input id="password_copy">
</li>
<li id="confirmpass_li" class="">
<label for="r_confirmpass">Confirm Password:</label>
<div id="confirmpass_img"></div>
<input type="password" maxlength="20" id="confirmpass" name="r_confirmpass">
<div id="confirmpass_msg"></div>
</li>
<li id="dob_li" class="validated">
<label for="dob">date of birth:</label>
<div id="dob_img"></div>
<input type="dob" maxlength="20" id="dob" name="dob">
<div id="dob_msg"></div>
</li>
<li id="email_li" class="validated">
<label for="email">email:</label>
<div id="email_img"></div>
<input type="email" maxlength="20" id="email" name="email">
<div id="email_msg"></div>
</li>
</ul>
CSS
label {display:block;margin:2px;}
.form {padding:0px;margin:0px;background-color:#EDECDC;}
.form li {width:190px;margin:3px;padding:5px 5px 5px 30px;list-style:none;position:relative;}
*html .form li {left:-15px;}
.form li img {position:absolute;left:5px;}
.form .error {border:1px solid #A90000;padding:4px 4px 4px 29px;background-color:#F8E5E5;}
.form .success {border:1px solid #74F019;padding:4px 4px 4px 29px;background-color:#DEF8CA;}
.form .selected {border:1px solid #1AA8E1;padding:4px 4px 4px 29px;background-color:#8DD8F7;}
#login_table .pad {padding:15px;}
.form input.login {padding:2px 7px;width:auto;}
.form input {width:180px;}
Javascript
$.fn.copyTo = function(to) {
var to = $(to);
for ( var i = 1; i < arguments.length; i++ )
to.set( arguments[i], this.get(0)[ arguments[i] ] );
return this;
};
new function() {
// $.fn.validate = validate() {};
$.fn.validate = {
init: function(o) {
if(o.name == 'username') { this.username(o) };
if(o.name == 'password') { this.password(o) };
if(o.name == 'email') { this.email(o) };
if(o.name == 'dob') { this.dob(o) };
},
username: function(o) {
var user = /[(\*\(\)\[\]\+\.\,\/\?\:\;\'\"\`\~\\#\$\%\^\&\<\>)+]/;
if (!o.value.match(user)) {
doValidate(o);
} else {
doError(o,'no special characters allowed');
};
},
password: function(o) {
var pass = /[(\*\(\)\[\]\+\.\,\/\?\:\;\'\"\`\~\\#\$\%\^\&\<\>)+]/;
if (!o.value.match(pass)) {
doValidate(o);
} else {
doError(o,'no special characters allowed');
};
},
email: function(o) {
var email = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (o.value.match(email)) {
doSuccess(o);
} else {
doError(o,'not a valid email');
};
},
dob: function(o) {
var dob = /(0[1-9]|1[012])+\/(0[1-9]|[12][0-9]|3[01])+\/(19|20)\d\d/;
if (o.value.match(dob)) {
doSuccess(o);
} else {
doError(o,'not a valid date');
};
}
};
function doSuccess(o) {
$('#' + o.id + '_img').html('<img src="http://animatedperson.webs.com/jquery/simple-jquery-form-validation/accept.gif" border="0" style="float:left;" />');
$('#' + o.id + '_li').removeClass("error");
$('#' + o.id + '_msg').html("");
$('#' + o.id + '_li').addClass("success");
}
function doError(o,m) {
$('#' + o.id + '_img').html('<img src="http://animatedperson.webs.com/jquery/simple-jquery-form-validation/exclamation.gif" border="0" style="float:left;" />');
$('#' + o.id + '_li').addClass("error");
$('#' + o.id + '_msg').html(m);
$('#' + o.id + '_li').removeClass("success");
}
//private helper, validates each type after check
function doValidate(o) {
$('#' + o.id + '_img').html('<img src="http://animatedperson.webs.com/jquery/simple-jquery-form-validation/loading.gif" border="0" style="float:left;" />');
$.post('ajax.php', { id: o.id, value: o.value }, function(json) {
eval("var args = " + json);
if (args.success == true)
{
doSuccess(args);
}
else
{
doError(args,args.msg);
}
});
};
};
$.fn.match = function(m) {
$('#' + this.get(0).id + '_img').html('<img src="http://animatedperson.webs.com/jquery/simple-jquery-form-validation/loading.gif" border="0" style="float:left;" />');
if ($(this).get(0).val() == $(m.match).val()) {
$('#' + this.get(0).id + '_img').html('<img src="http://animatedperson.webs.com/jquery/simple-jquery-form-validation/accept.gif" border="0" style="float:left;" />');
$(m.error).removeClass("error");
$(m.error).addClass("success");
$('#' + this.get(0).id + '_msg').html("");
} else {
$('#' + this.get(0).id + '_img').html('<img src="http://animatedperson.webs.com/jquery/simple-jquery-form-validation/exclamation.gif" border="0" style="float:left;" />');
$(m.error).addClass("error");
$(m.error).removeClass("success");
$('#' + this.get(0).id + '_msg').html("The passwords don't match, please try again");
};
};
$(document).ready(function()
{
$("//[@class=validated]/input").blur(function() {
$(this).validate.init(this);
});
$("#confirmpass").blur(function() {
$(this).match({match: '#password', error: '#confirmpass_li'});
});
$("#password").keyup(function() {
$(this).copyTo("#password_copy","value");
});
// This Used To Be HOVER, But I.E. Didnt Like It
//$(".form li").hover(function(){$(this).addClass("selected");},function(){$(this).removeClass("selected");});
$(".form li").mouseover(function() {
$(this).addClass("selected");
});
$(".form li").mouseout(function() {
$(this).removeClass("selected");
});
});
0 comments:
Post a Comment