Validasi Password, Username dan Email menggunakan Jquery
» 0 Comments » Permalink
Dalam kesempatan ini saya membahas validasi Password, Username dan Email menggunakan Jquery yang baik dan benar.
Sebelumnya kita harus mempunyai Jquery Plugin.
1. Memanggil Library Jquery Tersebut dan letakkan diantara head
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
2. Masukkan function dari jquery untuk validasinya
<script>
$(function(){
var name = $("#name"), email = $("#email"),
password = $("#password"),
allFields = $([]).add(name).add(email).add(password), tips = $(".validateTips");
function updateTips(t){
tips.text(t).addClass("ui-state-highlight");
setTimeout(function(){
tips.removeClass("ui-state-highlight", 1500);
}, 500);
}
function checkLength(o, n, min, max){
if (o.val().length > max || o.val().length < min) {
o.addClass("ui-state-error");
updateTips("Length of " + n + " must be between " + min + " and " +max + ".");
return false;
} else {
return true;
}
}
function checkRegexp(o, regexp, n){
if (!(regexp.test(o.val()))) {
o.addClass("ui-state-error");
updateTips(n);
return false;
}
else {
return true;
}
}
$('button.simpan').click(function(){
var bValid = true;
allFields.removeClass("ui-state-error");
bValid = bValid && checkLength(name, "username", 3, 16);
bValid = bValid && checkLength(email, "email", 6, 80);
bValid = bValid && checkLength(password, "password", 5, 16);
bValid = bValid && checkRegexp(name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter.");
bValid = bValid && checkRegexp(email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))? (\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)? (\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+ (([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com");
bValid = bValid && checkRegexp(password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9");
if (bValid) {
$("form#validateForm").submit();
}
});
});
</script>
