// Develop by AR-LEUNG
// Website : http://study.ar-leung.net
function validate(mode, form_id, class_name){
var valid = true;
var err_box = "";
/*
var message = {
required : "This field is required.",
digit : "Please enter only digits.",
number : "Please enter a valid number.",
email : "Please enter a valid email address.",
url : "Please enter a valid URL.",
date : "Please enter a valid date ",
rangeLen : "Please enter a value must be {0}-{1} character(s)",
moreLen : "Please enter more than {0} characters.",
leastLen : "Please enter least than {0} characters.",
tick : "Please tick the checkbox"
};
*/
// mode == 1 ? alert(message.required) : document.getElementById(item[i].id + ":e").innerHTML = message.required;
var item = document.getElementById(form_id).getElementsByClassName('js');
var isError = false;
if(mode == 0){
for(var i = 0; i < item.length; i++){
var element = document.getElementById(item[i].id + ":e");
// var checkName = (item[i].id).split("_",2);
// if (element === null && checkName[1] == undefined){
if (element === null){
var ne = document.createElement("span");
if(class_name != null){
ne.setAttribute("class", class_name);
}
ne.setAttribute("id",item[i].id + ":e");
document.getElementById(item[i].id).parentNode.insertBefore(ne,document.getElementById(item[i].id).nextSibling);
}
}
}
for(var i = 0; i < item.length; i++){
required = (item[i].getAttribute("required"));
numeric = (item[i].getAttribute("numeric"));
email = (item[i].getAttribute("email"));
url = (item[i].getAttribute("url"));
date = (item[i].getAttribute("date"));
rangeLen = (item[i].getAttribute("rangeLen"));
moreLen = (item[i].getAttribute("moreLen"));
leastLen = (item[i].getAttribute("leastLen"));
tick = (item[i].getAttribute("tick"));
err = (item[i].getAttribute("err"));
value = document.getElementById(item[i].id).value;
if((required != null) && required == "true"){
if(value == "" || value == null){
mode == 1 ? err_box += err + "\n" : document.getElementById(item[i].id + ":e").innerHTML = err;
valid = false;
}else{
if(mode != 1)
document.getElementById(item[i].id + ":e").innerHTML = "";
}
}
if((value != null) && numeric == "int"){
var numericExpression = /^[0-9]+$/;
if(!value.match(numericExpression) || ((required != null) && required == "true") ){
mode == 1 ? err_box += err + "\n" : document.getElementById(item[i].id + ":e").innerHTML = err;
valid = false;
}else{
if(mode != 1)
document.getElementById(item[i].id + ":e").innerHTML = "";
}
}
if((value != null) && numeric == "double"){
var numericExpression = /[0-9]|\./;
if(!value.match(numericExpression) || ((required != null) && required == "true") ){
mode == 1 ? err_box += err + "\n" : document.getElementById(item[i].id + ":e").innerHTML = err;
valid = false;
}else{
if(mode != 1)
document.getElementById(item[i].id + ":e").innerHTML = "";
}
}
if((value != null) && email == "true"){
var emailRegEx = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
if(value.search(emailRegEx) == -1){
mode == 1 ? err_box += err + "\n" : document.getElementById(item[i].id + ":e").innerHTML = err;
valid = false;
}else{
if(mode != 1)
document.getElementById(item[i].id + ":e").innerHTML = "";
}
}
if((value != null) && url == "true"){
var urlRegEx = /^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})).?)(?::\d{2,5})?(?:[/?#]\S*)?$/i;
if(!urlRegEx.test(value)){
mode == 1 ? err_box += err + "\n" : document.getElementById(item[i].id + ":e").innerHTML = err;
valid = false;
}else{
if(mode != 1)
document.getElementById(item[i].id + ":e").innerHTML = "";
}
}
if((value != null) && rangeLen != null){
var lenStr = rangeLen.split(",", 2);
if(value.length < parseInt(lenStr[0]) || value.length > parseInt(lenStr[1])){
mode == 1 ? err_box += err + "\n" : document.getElementById(item[i].id + ":e").innerHTML = err;
valid = false;
}else{
if(mode != 1)
document.getElementById(item[i].id + ":e").innerHTML = "";
}
}
if((value != null) && moreLen != null){
if(value.length < parseInt(moreLen)){
mode == 1 ? err_box += err + "\n" : document.getElementById(item[i].id + ":e").innerHTML = err;
valid = false;
}else{
if(mode != 1)
document.getElementById(item[i].id + ":e").innerHTML = "";
}
}
if((value != null) && leastLen != null){
if(value.length > parseInt(leastLen)){
mode == 1 ? err_box += err + "\n" : document.getElementById(item[i].id + ":e").innerHTML = err;
valid = false;
}else{
if(mode != 1)
document.getElementById(item[i].id + ":e").innerHTML = "";
}
}
if(tick == "true"){
if( document.getElementById(item[i].id).checked == false ){
mode == 1 ? err_box += err + "\n" : document.getElementById(item[i].id + ":e").innerHTML = err;
valid = false;
}else{
if(mode != 1)
document.getElementById(item[i].id + ":e").innerHTML = "";
}
}
if((value != null) && date != null){
switch(date) {
case "YYYY-DD-MM" :
dateExpression = /^[0-9]{4}[ -](0?[1-9]|[12][0-9]|3[01])[ -](0?[1-9]|1[012])$/;
break;
case "MM-YYYY-DD" :
dateExpression = /^(0?[1-9]|1[012])[ -][0-9]{4}[ -](0?[1-9]|[12][0-9]|3[01])$/;
break;
case "DD-YYYY-MM" :
dateExpression = /^(0?[1-9]|[12][0-9]|3[01])[ -][0-9]{4}[ -](0?[1-9]|1[012])$/;
break;
case "MM-DD-YYYY" :
dateExpression = /^(0?[1-9]|1[012])[ -](0?[1-9]|[12][0-9]|3[01])[ -][0-9]{4}$/;
break;
case "DD-MM-YYYY" :
dateExpression = /^(0?[1-9]|[12][0-9]|3[01])[ -](0?[1-9]|1[012])[ -][0-9]{4}$/;
break;
default: // "YYYY-MM-DD"
dateExpression = /^[0-9]{4}[ -](0?[1-9]|1[012])[ -](0?[1-9]|[12][0-9]|3[01])$/;
}
if(!dateExpression.test(value)){
mode == 1 ? err_box += err + "\n" : document.getElementById(item[i].id + ":e").innerHTML = err;
valid = false;
}else{
if(mode != 1)
document.getElementById(item[i].id + ":e").innerHTML = "";
}
}
}
if(valid == false){
if(mode == 1){
alert(err_box)
}
return false
}else{
// document.forms[form_id].submit();
document.getElementById(form_id).submit()
return true
}
}
TUTORIAL :
mode = 0 : Auto generated id
mode = 1 : Alert;
mode = 2-N : Add ( DIV or SPAN ) ID, Example
mode 0 :
<form method="post" id="frm">
<input class="js" type="input" name="box" id="box" required="true" err="message">
<input type="submit" onclick="validate(0,'frm')" name="submit" value="submit">
</form>
mode 1 :
<form method="post" id="frm">
<input class="validate" type="input" name="box" id="box" required="true" err="message">
<input type="submit" onclick="validate(1,'frm')" name="submit" value="submit">
</form>
mode 2 :
<form method="post" id="frm">
<input class="validate" type="input" name="box" id="box" required="true" err="message">
<span id="testbox_"></span>
<input type="submit" onclick="validate(2,'frm')" name="submit" value="submit">
</form>
Remark :
required = “true", 必須輸入中文
numeric = “int", 必須輸入中整數
numeric = “double", 必須輸入小數
email = “true", 必須輸入電郵
url = “true", 必須輸入網址
rangeLen = “0, 2″ 必須輸址 0-2 的長度數字
moreLen = “5″ 須輸入網址大過 5 的長度數字
leastLen = “5″ 須輸入網址少過 5 的長度數字
tick = “true", 必須輸入剔
date = “YYYY-DD-MM", 必須輸入只定格式日期
err = “message", 必須輸入訊息
Download : http://study.ar-leung.net/file/code/validation.js