起風前的相遇: 8月 2010

25 8月 2010

jQuery Form + blockUI

基本的crud操作，個人是相當喜歡在Search時使用jQuery Form來做ajax submit，將結果指到一個div中顯示，這樣的優點是不是再寫任何程式來保留使用者查詢的條件，因為它根本沒被更新過，特別是一些select/option這類還要去比對的部份就不用再費心。
至於Create、Update這類的就不用麻煩到用ajax submit，但是必需要考慮到duplicate submit的問題，以往會利用些小方法，像是為每一次要輸入的from建一個id，發現目前這id與之前最後一次收到的id相同時，就取消這次的操作，或是直接disable掉可以操作的button，但利用blockUI可以同時達到告知使用者已經在處理中及防止duplicate submit的效果。
下面是簡單的範例筆記

<html>
	<head>
		<title>Form</title>
		<script src="jquery-1.4.2.js" type="text/javascript"></script>
		<script src="jquery.form.js" type="text/javascript"></script>
		<script src="jquery.blockUI.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="main">
			<!--Search Form-->
			<div id="form">
			<script language="javascript">
			$().ready(function(){
				var options = {
					target : "#result",
					success : $.unblockUI
				};
				
				$("#myForm").submit(function() {
					$(this).ajaxSubmit(options);
					$.blockUI();
					return false;
				});
			});
			</script>
			<form name="myForm" action="result.html" method="post" id="myForm">
				<input name="age" type="text" />
				<input type="submit" value="Search" />
			</form>
			</div>
			
			<!-- Dispaly result here-->
			<div id="result">
			</div>
		</div>
	</body>
</html>

23 8月 2010

jQuery Validation (2)

jQuery Validate還有些設定與使用方式可以利用

Debug mode: 在options中，加入debug:true後，即便是所有validation都沒有錯誤也不會行submit，真的是讓人debug用

<script language="JavaScript">
$().ready(function() {
	$("#myForm").validate({
		debug : true	
	});
});
</script>

submitHandler:預設的submitHandler是在所有validation都通過後直接執行form.submit(),修改default submitHandler可以做兩件事，一是檢查基本validation難以檢查的資料，二是可以改用ajax或其他方式執行submit，而submit之後也可以利用blockui等其他plugin避免重覆submit

<script language="JavaScript">
$().ready(function() {
	$("#myForm").validate({
		submitHandler : function(form) {
			$(form).ajaxSubmit();
		}
	});
});
</script>

messages:自訂錯誤提示的訊息

<script language="JavaScript">
$().ready(function() {
	$("#myForm").validate({
		rules : {
			name : {required : true},
		},
		messages : {
			name : "Please fill your name here."
		}
	});
});
</script>

增加自訂的validation method，這些method也可以另外寫在一個js檔案以方便其他人共用

<script language="JavaScript">
//新增一個gt的method, param可以是一個陣列
$.validator.methods.gt = function(value, element, param){
	return (value > param);
};
//要求age必需大於5，並加入提示錯誤的message，利用{0},{1}可以代入param裡的值
$().ready(function() {
	$("#myForm").validate({
		rules : {
			age : {
				gt:5
			}
		},
		messages : {
			age : {
				gt : "must be great than {0}"
			}
		}
	});
});
</script>

22 8月 2010

JQuery validation (1)

Web上的Form Validation實在有相當多種，而各種Web Framework也都各自提供了Validation的基本功能，改用不同的Framework也通常代表要新學一種Validation的機制。
再以一個Form看來，雖說看起來可以重覆使用，但實際上同一個Form物件或Model在查尋、新增、修改時所需要的Validation條件通常都不盡相同，為此還需要客製不同的Action設定以供分辨，所以個人覺得比較好的方式是利用JavaScript的solution來處理，一則是易懂，一則是容易通用。

JQuery validation 就是一個非常方便的工具，雖說JQuery官方的JQuery UI也有Formular可以使用，但由於接觸JQuery validation較早，而且也沒有特別的問題，也就一直延用下來。
JQuery validation的官網是：http://bassistance.de/jquery-plugins/jquery-plugin-validation/

JQuery基本上有兩種使用方式，
第一種是在input中間使用class與其他attributes來指定要用的validation

<script language="JavaScript">
<!--
$().ready(function() {
 $("#myForm").validate();
});
-->
</script>   

<input name="age" class="required number" maxlength="3" type="text" id="age" />

第二種是直接設定validtaion的rules

<script language="JavaScript">
<!--
$().ready(function() {
 $("#myForm").validate({
  rules : {
   age : {required:true, number:true}
  }
 });
});
-->
</script>

基本所提供的validation有

required:必填欄位，範例：required:true
remote:使用遠端系統其他API來檢核，範例：remote : {url:"my.do", type:"post" data:{param1: function(){return $("#inputField").val();}}}
minlength:最小資料長度，範例：minlength:2
maxlength:最大資料長度，範例：maxlength:10
rangelength:資料長度區間，範例：rangelength:[2,10]
min:最小值，範例：min:2
max:最大值，範例：max:20
range:資料區間，範例：range:[2,20]
email:是否符合email格式，範例：email:true
url:是否符合url格式，範例：url:true
date：是否符合日期格式，此格式為20/08/2010，僅有格式而已....，範例：date:true
dateISO:是否符合國際日期格式，此格式為2010/08/20，僅有格式而已....，範例：dateISO:true
number:資料是否為數字類，可輸入小數，範例：number:true
digits:資料是否為整數，範例：digits:true
accept:用以檢查副檔名，範例：accept: "xls|csv"
equalTo:檢查兩欄位值是否相同，範例：equalTo:"#password"

JQuery validation也提供多語系的支援，修改它所提供在localization中的message_xx.js，然後include到你的頁面即可。