如何jquery验证动态生成的隐藏textarea

Question

我正在尝试验证动态添加并隐藏的多个textarea数组。所以我正在做的是，我正在使用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。您错过了外部括号。 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元素是否仍然隐藏，因为用户永远不会与它们进行交互。您可以从隐藏字段添加/删除规则，它们将在显示时自动验证，并在隐藏时不验证。

如果您需要验证任何隐藏的字段，您将需要覆盖默认的ignore设置。 []的意思是“没有”。所以ignore: []意味着什么都不做（验证一切）。

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