添加規則后，jQuery表單驗證不起作用

Question

我為控件添加了規則。 但表單驗證后仍未顯示錯誤。 單擊后，我具有驗證輸入框並檢查空字符串。 如果空字符串顯示錯誤，則調用ajax方法。 但是錯誤永遠不會顯示。

編輯：

@Sparky建議。 我正在更新我的帖子。 DOM加載后，我正在加載輸入框和錨標記。 然后我為CompanyName控件添加了驗證規則。 還要在<a>單擊中檢查驗證，這是錯誤的。 但仍未顯示錯誤文本。

html

<form action="/Address/AddAddress" id="frmAddress" method="post" name="frmAddress" novalidate="novalidate">
   <div id="AddEditAddressPlaceHolder>
           <input name="CompanyName" class="SPE-Formcontrol" id="CompanyName" type="text" value="">

          <a href="#" class="btn btn-success" onclick="javascript: submitcompanyfind();">Find Company</a>

javascript

$.ajax({
                url: 'AddressTypesListChange',
                type: "Get",
                data: { 'addressType': $("#AddressTypeslist").val()},
                cache: false,
                success: function(data) {
                    $('#AddEditAddressPlaceHolder').html(data);
                   $("#frmAddress").validate({
                        errorClass: "validationError"
                    });
                    $("#CompanyName").rules("add", {required: true,messages: {required: "Required"}});

                }
            });


 function submitcompanyfind() {
      $("#frmAddress").validate();
      alert($("#frmAddress").valid()); // it is false but no error showing.
     if ($('#CompanyName').val() !="") {
         $.ajax({
             url: 'FindCompanyList',
             type: 'Post',
             data: $("#frmAddress").serialize(),
             success: function(data) {
                 var count = Object.keys(data).length;
                 //load the company table rows
                 LoadCompanyList(data);

                 $("#hdnDivComapnyfinder").show();
             },
             error: function(xhr, ajaxOptions, thrownError) {

             }
         });
     }

 }

頁面加載后，html源代碼如下所示。

<div id="AddEditAddressPlaceHolder">
        <input name="CompanyName" class="SPE-Formcontrol 
        input-validation-error" id="CompanyName" type="text" 
       value="" aria-required="true" 
       aria-describedby="CompanyName-error" aria-invalid="true">

    </div>

Answer 1

編輯：以下答案是針對OP的問題的原始版本 。

---

該問題是由於在單擊提交按鈕時觸發的函數內部錯誤地調用了.validate()方法引起的。

.validate()方法是插件的初始化，僅在DOM准備就緒時被調用一次。

另一個問題是ajax()的位置。 .ajax()僅屬於submitHandler .validate()方法的submitHandler選項內 。

$(document).ready(function() {

    $("#frmAddress").validate({
         rules: {
             CompanyName: {
                 required: true
             }
         },
         messages: {
             CompanyName: {
                 required: "Required"
             }
         },
         errorClass: "validationError",
         submitHandler: function(form) {
             // your ajax function here,
             return false;
         }
     });

});

不要忘記從“提交按鈕”中刪除您的內聯JavaScript。

<a href="#" class="btn btn-success">Find Company</a>

Ans，因為您使用的是錨標記而不是實際的type="submit" button或input ，所以您需要編寫click處理程序函數，該函數可通過以編程方式調用commit來觸發驗證...

$('#frmAddress a').on('click', function() {
    $('#frmAddress').submit();
});

工作演示： http ： //jsfiddle.net/3nsapjrh/

---

您無需將novalidate="novalidate"屬性放在<form>標記內。 該插件已經為您動態地完成了此任務。

Answer 2

第二個答案：發布以響應編輯的OP。

自最初發布以來，問題已經發生了如此大的變化，我將不包含特定的代碼。 相反，我將回顧這種情況下需要遵循的關鍵點...

1. 加載頁面，包括相關的插件。

2. 觸發ajax()來加載和/或創建表單和/或其所有輸入字段。 {表格現已完全存在於頁面上}

3. 調用.validate()在新創建的表單上初始化插件。 你不會需要.rules()方法，因為你可以聲明在規則之內.validate()在這一點上。

注意事項 ：

• 調用.validate() ，由於任何原因都無法再次調用它。 您只能使用rules()方法動態添加/刪除規則。

• 您將不需要任何內聯JavaScript。 刪除您的onclick="javascript: submitcompanyfind();" 和submitcompanyfind()函數。

• 當您不使用type="submit" ，您需要構造一個簡單的click處理程序來觸發.submit() 。 如果在調用click處理程序時anchor標簽尚不存在，則只需“刪除”它 。

   $('#frmAddress').on('click', 'a', function() { $(this).submit(); }); 

• 如果要使用ajax()提交表單，則必須將該ajax()函數submitHandler .validate()方法的submitHandler選項中。