如何取消jquery驗證？

Question

我正在使用jquery validate插件進行表單驗證。我看到有些取消功能很奇怪。我有一個電子郵件字段，提交按鈕和取消按鈕的表單。當我在電子郵件字段中鍵入不完整的地址，然後，如果不點擊頁面上的其他任何地方，單擊取消，驗證器將檢查電子郵件字段，在字段旁邊顯示無效消息並殺死取消操作。

我在這裏找到一個相關的問題：jQuery Validation plugin: disable validation for specified submit buttons。它看起來完全像我所需要的。但它不起作用！我將「取消」css類添加到我的取消按鈕，但它沒有效果。

此示例代碼演示了我所看到的問題。我看到了FF和Chrome中的行爲。

在本示例中，當我在文本輸入中鍵入無效的電子郵件地址，然後在單擊其他任何內容之前單擊取消按鈕，驗證器在文本輸入旁邊顯示一條消息，並且不會出現取消操作。如果我再次單擊取消，頁面會按預期重新加載。這意味着要取消頁面，我必須點擊取消兩次。

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#myForm").validate() 

     $(".cancel").click(function() { 
      location.reload(true) 
     }) 

    }) 
</script> 

<div> 
    <form name="myForm" id="myForm" action="index.html"> 
     <input type="text" class="required email" id="myField" name="myField"/> 
     <input type="submit" value="Submit"/> 
     <input type="submit" value="Cancel" class="cancel"/> 
    </form> 
</div> 

也很有趣：我試圖運行JQuery驗證文檔（http://docs.jquery.com/Plugins/Validation/Reference#Skipping_validation_on_submit）中發現的演示。當我運行演示時，我無法判斷驗證是否有效 - 即使輸入gobbledygook並單擊提交按鈕，電子郵件字段也不會被標記爲無效。我所得到的只是一個簡單的提醒，它已被添加到表單的submitHandler中。取消按鈕的行爲方式是相同的，所以我不知道添加取消類是否可行。

我正在FF和Chrome上運行這個。我使用的是jquery 1.9.1和jquery-validate 1.11.4。

Answer 1

As per the accepted answer on the question you reference，僅添加cancel類「取消」驗證。 As you can see in this demo，取消按鈕的行爲與另一個提交按鈕的行爲完全相同，只是驗證被繞過。請單擊取消按鈕時，請準確描述您希望看到的內容。

否則，也許這就是你想要什麼：http://jsfiddle.net/25XBT/

jQuery的：

$(document).ready(function() { 

    var validate = $('#myform').validate({ 
     // your rules & options 
    }); 

    $('#cancel').on('click', function (e) { 
     e.preventDefault(); 
     validate.resetForm(); 
     $('form').get(0).reset(); 
    }); 

}); 

HTML：

<form id="myform"> 
    <input type="text" name="myfield" /> 
    <input type="submit" /> 
    <input type="submit" id="cancel" class="cancel" value="cancel" /> 
</form> 

參見：http://docs.jquery.com/Plugins/Validation/Validator/resetForm

編輯：class="cancel"已被棄用，以支持formnovalidate屬性。

<input type="submit" id="cancel" formnovalidate="formnovalidate" value="cancel" />