添加规则后，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选项中。