/******************************************
驗證表單
版本：1.0 
作者：李金霖 (Mobius.Curtiss)
日期：2006/8/14

使用方式：
HTML:
在需要驗證的欄位加上class
require 表示 必填欄位
email 表示 驗證email
目前只支援 <input  type=text>驗證

TODO: 
1. 加上 tel, num 驗證
2. 自動 focus
3. 錯誤訊息以 class 方式呈現 (.erroutline, .errtext)
4. 驗證 select, textarea, 與 input type=checkbox 與 type=radio 
5. 顯示一般性錯誤說明
6. 偵測 reset 與 submit 按鈕，讓 reset時候，表單回覆原始狀態
7. 將focus移到第一個錯誤欄位
8. 驗證 max, min
******************************************/

//錯誤訊息設定，可依自己喜好修改
var requiredMsg="這是必填欄位";
var emailMsg="錯誤的Email ";
var telMsg="電話號碼錯誤";

/*****************************************/
//表單submit後行為
function gosubmit(){
var forms;
	forms=document.getElementsByTagName('form');
		for (var i=0;i<forms.length;i++){
			forms[i].onsubmit=function(){
			resetmsg(this);
			return validate(this);
			};
	}

}

/*****************************************/
//執行驗證主程式
function validate(f){
//將錯誤歸零
var errCount=0;

//input部分
	var inputs,i;
	inputs = f.getElementsByTagName('input');
	for (i=0;i<inputs.length;i++){
		var inputType = inputs[i].getAttribute('type');
		
	//type="text","checkbox","radio" 處理方式

			switch(inputType.toLowerCase())
			{
				case 'text':
					//required 部分
					if (/\brequired\b/.test(inputs[i].className)){
						if (inputs[i].value==''){
						errMsg(inputs[i]);
						errCount ++;
						}
					}	
					
					//email 部分
					if (/\bemail\b/.test(inputs[i].className)){
						if(inputs[i].value){
							if(!chkemail(inputs[i].value)){
							errMsg(inputs[i]);
							errCount ++;
							}
						}
					}
					
					if (/\btel\b/.test(inputs[i].className)){
							if(inputs[i].value){
								if(!chktel(inputs[i].value)){
								errMsg(inputs[i]);
								errCount++;
								}
							}
					}
								
				break;
				case 'checkbox':
				
				break;
				case 'radio':
				break;			
			
			}

	}
	
//textarea部分，待開發
//select 部分，待開發

//如果驗證過關，才能執行 submit動作
	if (errCount==0){
	return true;
	} else {
	return false;
	}
}

/*****************************************/
//驗證 email 功能
function chkemail(str) 
  {
      return str.match(/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/);
  }

/*****************************************/
//驗證 tel 功能
function chktel(str) 
  {
      return str.match(/[\d\(\)\.\-#\*\+~]{7,}/);
  }
/*****************************************/
//錯誤訊息處理
function errMsg(o){
	var errMsg;
		if (/\brequired\b/.test(o.className)){
				errMsg = requiredMsg;
		} 
		if (/\bemail\b/.test(o.className)){
				errMsg = emailMsg;
		} 
		if (/\btel\b/.test(o.className)){
				errMsg = telMsg;
		} 
		
	//新增錯誤訊息區
	var errnode=document.createElement('span');
	var errtxt=document.createTextNode(errMsg);
	errnode.appendChild(errtxt);
	errnode.setAttribute('name','errmsg');
	o.parentNode.insertBefore(errnode,o.nextSibling);
	o.style.cssText="border:1px solid red;";
	//o.className="errMsg";
}

/*****************************************/
//重置錯誤訊息
function resetmsg(f){
/*
這段碼不知道那裡有問題，只能取得一半的值，先用以下的寫法解決 2006/08/14
	var obj = f.getElementsByTagName('span');
	for (var i=0; i<obj.length; i++){
		if (obj[i].getAttribute('name')=='errmsg'){
		 	obj[i].parentNode.removeChild(obj[i]);
		}
	}
*/
     var elem = document.getElementsByTagName('span');
     var arr = new Array();
     for(i = 0,iarr = 0; i < elem.length; i++) {
          att = elem[i].getAttribute("name");
          if(att == 'errmsg') {
               arr[iarr] = elem[i];
               iarr++;
          }
     }

	for (var i=0; i<arr.length; i++){
			arr[i].previousSibling.style.cssText="border:1px solid green;";
		 	arr[i].parentNode.removeChild(arr[i]);
	}

}

/*****************************************/
//程式啟動監聽器
function addEvent(obj, evType, fn){
	if(obj.addEventListener)
	{
	obj.addEventListener(evType, fn,false);
	return true;
	} else if (obj.attachEvent){
	var r = obj.attachEvent("on"+evType, fn);
	return r;
	} else {
	return false;
	}
}

if (document.getElementById && document.createTextNode){
 addEvent(window,'load', gosubmit);	
}
/*****************************************/
//end