防止頁面重複送出使用 jQuery:Validation
- 2010-03-06
- 34389
- 0
前端驗證的極品 jQuery:Validation 相信大家都熟了,最近想利用它來處理防止重複送出的按鈕時發生了怪事,在 Firefox 執行的很順暢,但是在 IE 各版本都會發生 Java Script 爆掉的情況,難道說知名套件有那麼嫩?
馬上來一個很簡單的 Form
<form action="/test" method="post"> <p><label for="name">姓名:</label> <input id="name" name="name" type="text" value="" /></p> <p><label for="email">電郵:</label> <input id="email" name="email" type="text" value="" /></p> <p><label for="pw">密碼:</label> <input id="pw" name="pw" type="text" value="" /></p> <input type="submit" value="送出" /> </form>
接者實作基本的驗證並且利用 submitHandler 去做出限制第二次送出的動作。
<script type="text/javascript" > $('form').validate({ rules: { name: { required: true }, email: { required: true, email: true }, pw: { required: true } }, submitHandler: function () { $('form input:submit').attr('disabled', 'disabled'); $('form input:submit').submit(); } }); </script>
這樣看起來相當的好,將按鈕關掉後再執行送出,但是這是會死人的,因為使用了送出的寫法是找到 submit 按鈕送出,這樣會造成重複驗證,而且不會有結束的一天,也就是我們說的無窮迴圈。正確的寫法應該改成下面這樣。
<script type="text/javascript" > $('form').validate({ rules: { name: { required: true }, email: { required: true, email: true }, pw: { required: true } }, submitHandler: function (form) { $('form input:submit').attr('disabled', 'disabled'); form.submit(); } }); </script>
最後 demo 幹了一件很無聊的事情,假的上傳進度
<script type="text/javascript" > $('form').validate({ rules: { name: { required: true }, email: { required: true, email: true }, pw: { required: true } }, submitHandler: function (form) { $('form input:submit').attr('disabled', 'disabled'); interval = window.setInterval(function () { var text = $('form input:submit').val(); if (text.length < 5) { $('form input:submit').val(text + '.'); } else { $('form input:submit').val('送出'); } }, 200); form.submit(); } }); </script>
http://valums.com/wp-content/uploads/ajax-upload/demo-jquery.htm
回應討論