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