动态表单输入上的 jquery 验证插件不起作用

IT技术 javascript jquery forms jquery-validate
2021-01-15 10:35:08

我有一个表单，其中有一些字段，然后如果需要，用户可以添加更多相同类型的字段。我使用http://jqueryvalidation.org/ 验证插件来验证字段。

当我在某处阅读时，jquery 验证插件需要字段的唯一名称来验证它们。所以我对每个字段进行了唯一命名。首先，如果我使用类添加规则，我希望验证插件能够处理动态添加元素的验证。但事实证明并非如此。

因此，即使每个字段的名称是唯一的，验证插件也只会验证最初呈现的第一个输入。

我什至尝试使用$.clone() 以希望它能处理所有事件绑定。但它对我不起作用。所以我移动到下划线来重复标记，因为有很多字段，我不想在 JS 中编写模板并相应地命名。

我找不到解决方案并卡在这里。在这个问题得到解决之前不能再谈了。

这是我写的JS。 

$("#work_form").validate();

$(".work_emp_name").rules("add", {
    required: true
});

_.templateSettings.variable = "element";
var tpl = _.template($("#form_tpl").html());

var counter = 1;

$("form").on("click", ".add_employer", function (e) {
    e.preventDefault();
    var tplData = {
        i: counter
    };
    $("#word_exp_area").append(tpl(tplData));
    counter += 1;
});

请在小提琴设置中找到标记。

示例和代码设置在这里

3个回答

当使用此插件中的一种方法（如.rules()）并针对多个元素（如 ）时class，您还必须使用 jQuery.each()方法。

$('.work_emp_name').each(function () {
    $(this).rules("add", {
        required: true
    });
});

并且您不能.rules()在 DOM 中尚不存在的元素上使用。只需将.rules()方法移动到创建新输入的函数内部即可。

$("form").on("click", ".add_employer", function (e) {
    e.preventDefault();
    var tplData = {
        i: counter
    };
    $("#word_exp_area").append(tpl(tplData));
    counter += 1;
    $('.work_emp_name').each(function () { 
        $(this).rules("add", {
            required: true
        });
    });
});

工作演示：http : //jsfiddle.net/Yy2gB/10/

但是，您可以通过仅针对一个新字段而不是所有带有work_emp_name class.

$("form").on("click", ".add_employer", function (e) {
    e.preventDefault();
    var tplData = {
        i: counter
    };
    $("#word_exp_area").append(tpl(tplData));   // <- add new field
    $('input[name="work_emp_name['+counter+']"]').rules("add", {  // <- apply rule to new field
        required: true
    });
    counter += 1;
});

工作演示：http : //jsfiddle.net/Yy2gB/11/

我上面的两个示例都是为动态创建的字段添加规则。您仍然需要在 dom 准备好后为您的静态字段声明任何规则，如下所示......

$("#work_form").validate({
    rules: {
        "work_emp_name[0]": {
            required: true
        }
    }
});
@SachinG，这取决于每个开发人员。对于此插件，您必须.each().
2021-03-18 10:35:08
只是为了节省时间（或现在）我刚刚添加data-rule-required="true"到模板本身。这也强制对动态元素进行验证规则。我有 8 个字段，单击Add Employer按钮即可重复（名称、工作范围、开始和结束日期、任命书等）。因此，如果我还想向这些字段添加规则，则必须在Add Employer单击侦听器中编写相同的代码。太多了。相反，我选择了数据属性方法来添加验证规则。
2021-03-30 10:35:08
您能否扩展您的答案以显示如何为这些动态规则设置自定义验证消息？
2021-04-03 10:35:08
但是通过数据属性添加规则并没有提供更多控制，就像是否有任何字段依赖于其他字段的值一样。所以你的答案也适合所有这些场景，并提供更多控制。所以这是正确的方法。感谢您抽出时间解决这个问题。
2021-04-05 10:35:08
也许这是一个模糊的问题，但是像 validate 这样的插件不应该处理动态添加的字段或添加带有类的规则，而$.each不是首先使用吗？现在我知道它写得非常好并且有很多选择，但我的意思是这些是插件应该具备的基本功能。
2021-04-09 10:35:08

返回第一个选定元素的验证规则或添加指定的规则并返回第一个匹配元素的所有规则。要求对父表单进行验证，即首先调用 $( “form” ).validate() 或

删除指定的规则并返回第一个匹配元素的所有规则。 更多信息

function addRule(id){
    $("[name='work_emp_name["+id+"]']").rules("add", {
        required: true
    });
}
$("#work_form").validate();
addRule(0);

_.templateSettings.variable = "element";
var tpl = _.template($("#form_tpl").html());

var counter = 1;

$("form").on("click", ".add_employer", function (e) {
    e.preventDefault();
    var tplData = {
        i: counter
    };
    $("#word_exp_area").append(tpl(tplData));
    addRule(counter);
    counter += 1;
}); here
我的疏忽。可以在页面初始化时或通过内联 HTML 声明现有的。修正了我的答案。谢谢。
2021-03-21 10:35:08
@Sparky 在这个 jsfiddle.net/Yy2gB/9 你的例子基本上你做了和我一样的事情，只是它只适用于新元素，而不适用于现有元素。
2021-03-22 10:35:08
帮助我的是在添加规则之前在表单Requires that the parent form is validated...上运行至关重要.validate()，否则它将无法工作。谢谢，@nzn
2021-03-28 10:35:08
正确的想法，但似乎比必要的要冗长一些。
2021-04-13 10:35:08

这是因为 jQuery 验证当前仅验证数组的第一次出现。

您可以检查我对插件的提交，该插件在命名数组的任何出现时都可以正常工作。

其它你可能感兴趣的问题
上一篇Android Hybid 应用程序使用 Ionic 框架显示远程图像的问题？ 下一篇使用 HTML5 File API 检查文件是否已更改