Category Archives: JS Function

*** Please Download Easyautocomplete library, Go to http://easyautocomplete.com/

autocomplete.ajax.php

[ 
	  {"name": "Afghanistan", "code": "AF"}, 
	  {"name": "Albania", "code": "AL"}, 
	  {"name": "Algeria", "code": "DZ"}
]

autocomplete.js

<script type="text/javascript">
		// CREATE AUTOCOMPLETE ITEM
		$(document).ready(function() {
			var options = {
				url: "ajax/autocomplete.ajax.php",
				getValue: "name",
				list: {	
					onSelectItemEvent: function() {
						var selectedItemValue = $("#countries").getSelectedItemData().code;
						document.getElementById("code").value = selectedItemValue;
						$("#countries").val($("#countries").getSelectedItemData().name).trigger("change");
					}
				}
			};
			$("#countries").easyAutocomplete(options);
		});	

		// CHECK AUTOCOMPLETE VALUE AND INPUT BOX EXIST
		function autocompleted(){
			var j = 0
			var code = document.getElementById("code").value;
			var countries = document.getElementById("countries").value;
			$.getJSON("./ajax/autocomplete.ajax.php", function(result){
				$.each(result, function(i, field){
					if(field.code == code && field.name == countries){
						j++;
					}
				});
				if(j == 1){
					// EXIST = SCUSSE
					alert("ok"); 
				}else{
					// NOT EXIT = FAIL
					alert("error");
				}
			});
		}
	</script>

index.php

<form method="post">
	<input id="countries" name="countries"/>
	<input id="code" name="code" type="hidden" />
	<input type="button" onclick="return autocompleted();" />
</form>

// 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