Jquery验证器插件不检查新的输入

Hi I use jQuery validator for one form. It was working nice until today. I added a new code to the form which adds/remove additional fields to the form (with set classes to "required")..

你好，我在一个表单中使用jQuery验证器。一直干得不错，直到今天。我向窗体添加了一个新代码，它向窗体添加/删除了其他字段(将类设置为“required”)。

basic the form is some thing like >

基本形式是>。

    <form name="form" id="form">
    <input name="text1" class="required">
    <a id="addnew">Add new text</a>
<div id="newitems"></div>
    <submit>
    </form>

The code I use is

我使用的代码是

<script type="text/javascript">
        $(document).ready(function({ $("#form").validate(); 
        $("#addnew").click(function({ 
        $("#newitems").append('<input class="required" name="newinput">'); 
}); });  
</script>

The idea is that when someone click on the Add new text inside the form is added a new field. My problem is that then the Validator doesn't work on the new field because its already loaded for the form.. How I can set the javascript to check and the new fields?

其思想是，当某人单击窗体内的Add new text时，将添加一个新字段。我的问题是验证器不能在新字段上工作，因为它已经为表单加载了。如何设置要检查的javascript和新字段?

I haven't copy the exact code of my site because its very long..

我还没有复制我网站的确切代码，因为它太长了。

This Is the validation plugin - its the most used validator on jquery

这是验证插件——jquery中最常用的验证器

4 个解决方案

#1

Upon creation of your new form element, you need to inform the validation plugin to check it by adding a rule. Adding the 'required' class to an element only alerts the plugin if the element is present on document load. Try this:

在创建新表单元素时，需要通知验证插件通过添加规则来检查它。将“required”类添加到元素中，只会在文档加载时提醒插件。试试这个:

   $(document).ready(function({ 
        $("#form").validate(); 
        $("#addnew").click(function({ 
            var input = $("<input />").attr("name", "newinput");
            $("#newitems").append(input);
            input.rules('add', {'required': true})
        }); 
    }); 

#2

if you are adding dynamic content any of existing not affecting to the new controls. you have to assign the event again after modifing the dom. so call the validator again afer dom modification.

如果您正在添加任何现有的不影响新控件的动态内容。在修改dom之后，必须再次分配事件。因此，在dom修改之后再次调用验证器。

#3

You have to bind the event again after loading the dynamic content.

加载动态内容后，必须再次绑定事件。

if you are adding dynamic content any of existing not affecting to the new controls. you have to assign the event again after modifing the dom. so call the validator again afer dom modification.

如果您正在添加任何现有的不影响新控件的动态内容。在修改dom之后，必须再次分配事件。因此，在dom修改之后再次调用验证器。

If you want to rebind simply call again

如果你想重新绑定，只需再次调用

 $("#addnew").click(function({ 
      $("#newitems").append('<input class="required" name="newinput">'); 
        }); 

You can also put it in a function

你也可以把它放在一个函数中

function rebindit() {
 $("#addnew").click(function({ 
     $("#newitems").append('<input class="required" name="newinput">'); 
    }); 
}

and each time your content changes call rebindit();

每次内容更改时调用rebindit();

#4

There is an onchange event in javascript which is triggered when the content of the field changes. You can make use of it on the new field to avail validation for that field as well.

在javascript中有一个onchange事件，当字段的内容发生更改时触发该事件。您也可以在新字段中使用它来帮助该字段的验证。