[jQuery] blockUI + jQuery.validate 配合使用

使用 jQuery.validate 驗證表單內容，若通過驗證則加上 blockUI 遮蓋畫面（一方面是防止使用者重複按下送出鈕、另一方面是有個 Loading 畫面可以讓使用者知道表單仍在處理中），反之(驗證不通過)則僅顯示錯誤就好。作法如下：

使用 jQuery.validate 的 submitHandler 事件：

	$(function(){
		$("#form1").validate({
			submitHandler :function(form) {
				form.submit(); // 送出表單
				// 遮蓋畫面
				$.blockUI({
						  message: $('#loading'),
						  css: {
								border: 'none',
								padding: '15px',
								backgroundColor: '#000',
								'-webkit-border-radius': '10px',
								'-moz-border-radius': '10px',
								opacity: .5,
								color: '#fff'
						  }
				});
			}

		});
	});

<div id="loading" style="display: none;">
   <img src="images/ajax-loader.gif" alt="loading" /><br />
   傳送中請稍後 ...
</div>