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

Question

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

我研究并发现了.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()方法，并将其放入创建这些新字段的任何函数中。

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

---

其次，您的选择器完全损坏。 您缺少外部括号。 "属性开头为"选择器的正确格式$('[attribute="value"]')

所以name属性以quiz[ques]开头，看起来像这样......

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

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

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

---

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

如果需要验证任何保持隐藏状态的字段，则需要覆盖默认的ignore设置。[]的意思是"什么都没有"。 所以ignore: []意味着什么都不忽略(验证一切)。

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