添加规则后，Jquery表单验证不起作用

jquery form validation not working after rule added

本文关键字：表单 验证 不起作用 Jquery 规则 添加      更新时间：2023-09-26

我已经为控件添加了规则。但是表单验证后仍然没有显示错误。点击后，我有验证输入框和检查空字符串。如果空字符串显示错误，否则调用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>

编辑:以下答案是OP对他的问题的原始版本。

这个问题是由于在点击提交按钮时触发的函数中错误地调用.validate()方法引起的。

.validate()方法是插件的初始化，只在DOM准备好时被调用一次。

另一个问题是ajax()的位置。.ajax()只属于.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>

既然你使用锚标记而不是真正的type="submit" button或input，你需要编写一个click处理程序函数，通过编程调用提交来触发验证…

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

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

您不需要将novalidate="novalidate"属性放在<form>标记中。

第二个答案:回复编辑op。

我不打算为一个自最初发布以来已经彻底改变的问题包含特定的代码。相反，我将回顾在这种情况下需要遵循的关键点……

  1. 加载页面，包括相关插件

  2. 触发ajax()加载和/或创建表单和/或其所有输入字段。{表单现在完全存在}

  3. 调用.validate()来初始化新创建表单上的插件。您不需要.rules()方法，因为此时可以在.validate()中声明规则。

指出

:

  • 一旦.validate()被调用，无论什么原因都不能再调用它。

    • 只能使用rules()方法动态添加/删除规则。

  • 你永远不需要任何内联JavaScript。删除您的onclick="javascript: submitcompanyfind();"和submitcompanyfind()功能。

  • 当您不使用type="submit"时，您需要构造一个简单的click处理程序来触发.submit()。如果当您调用click处理程序时锚标记还不存在，您只需要"委托"它。

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

  • 如果你用ajax()提交表单，那么你必须把ajax()函数放在.validate()方法的submitHandler选项中。

相关文章：