如何 jquery 验证动态生成的隐藏文本区域

Question

我正在尝试验证动态添加并隐藏的多个文本区域数组。所以我正在做的是，我正在使用 contenteditable div 并且每当用户输入时它都会设置隐藏的 textarea 的值。所以我正在对 textarea

使用验证

我研究并发现了 .each 功能并使用了它。但是还是不行。

<div class="input-group">  
<textarea name="quiz[ques][0][ques]" style="display:none;" class="content-hidden">asd</textarea>            
<div contenteditable="true" id="question-edit-1" placeholder="Enter Question 1" name="quiz[question][]" class="content-visible valid" aria-invalid="false"></div>   
</div>

<div class="input-group">  
<textarea name="quiz[ques][1][ques]" style="display:none;" class="content-hidden">asd</textarea>            
<div contenteditable="true" id="question-edit-2" placeholder="Enter Question 2" name="quiz[question][]" class="content-visible valid" aria-invalid="false"></div>     
</div>

脚本

$('form').submit(function (e) {
var ques = $('name^="quiz[ques]"');
ques.each(function() {
    $(this).rules("add", {
        required: true,
        messages: {
             required: "Please enter the questioon"
        }
    });
});
});

Answer 1

您的代码...

$('form').submit(function (e) {
    var ques = $('name^="quiz[ques]"');
    ques.each(function() {
        $(this).rules("add", {
            ....
        });
    });
});

您不应该在提交表单时添加规则，否则，您无法期望在单击提交按钮之前验证字段。您可以在动态创建需要规则的新字段时添加规则。因此，从提交处理程序中删除 .rules() 方法，并将其放入创建这些新字段的任何函数中。

动态创建新字段 -> 然后立即添加规则

其次，your selector is totally broken. You are missing the outside brackets. Correct format for an "attribute starts with" selector is $('[attribute="value"]')

因此 name 属性以 quiz[ques] would look like this...
开头
$('[name^="quiz[ques]"]')

如果您需要更具体的选择器，您可以添加 textarea 元素...

$('textarea[name^="quiz[ques]"]')

最后，默认情况下，所有隐藏字段都被忽略（未验证）。目前尚不清楚为什么您需要验证 textarea 元素（如果它们保持隐藏状态，因为用户永远无法与它们交互）。您可以 add/remove 隐藏字段中的规则，它们会在显示时自动验证，在隐藏时不验证。

如果您需要验证任何保持隐藏的字段，您将需要覆盖默认的 ignore 设置。 [] 表示 "nothing"。所以 ignore: [] 意味着什么都不忽略（验证所有内容）。

$('#myform').validate({ ignore: [], // ignore nothing - validate everything // other settings.... });

如何 jquery 验证动态生成的隐藏文本区域

How to jquery validate dynamically generated hidden textarea

php

codeigniter

jquery-validate