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

问题描述：

I am trying to validate multiple array of textarea which are added dynamically and are hidden as well. So what I am doing exactly is, I am using contenteditable div and whenever user inputs it sets the value of textarea which is hidden. So I am using validation for the textarea

I researched and found out about .each function and used it. But still it didn't work.

<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>

SCRIPT

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

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

我研究并发现了.each code>函数并使用它。但它仍然没有用。 p>

 ＆lt; div class =“input-group”＆gt;  
＆lt; textarea name =“quiz [ques] [0] [ques]”style =“display：none;” 类= “内容隐藏” ＆GT; ASD＆LT; / textarea的＆GT;  
＆lt; div contenteditable =“true”id =“question-edit-1”placeholder =“输入问题1”name =“quiz [question] []”class =“content-visible valid”aria-invalid =“false”  ＆GT;＆LT; / DIV＆GT;  
＆lt; / div＆gt; 
 
＆lt; div class =“input-group”＆gt;  
＆lt; textarea name =“quiz [ques] [1] [ques]”style =“display：none;” 类= “内容隐藏” ＆GT; ASD＆LT; / textarea的＆GT;  
＆lt; div contenteditable =“true”id =“question-edit-2”placeholder =“输入问题2”name =“quiz [question] []”class =“content-visible valid”aria-invalid =“false”  ＆GT;＆LT; / DIV＆GT;  
＆lt; / div＆gt; 
  code>  pre> 
 
  SCRIPT  p> 
 
 
  $（'form'）。submit（function（e）  ）{
var ques = $（'name ^ =“quiz [ques]”'）; 
ques.each（function（）{
 $（this）.rules（“add”，{
 required：true，  
消息：{
 required：“Please enter the questioon”
} 
}）; 
}）; 
}）; 
  code>  pre> 
  div>

答

Your code...

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

You are not supposed to add rules when you submit the form, otherwise, you cannot expect to validate fields before the submit button is clicked. You would add rules when you dynamically create the new fields that need the rules. So remove the .rules() method from the submit handler and put in inside whatever function creates these new fields.

Dynamically create the new field(s) -> then immediately add the rule(s)

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

So name attribute starts with quiz[ques] would look like this...

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

If you need to be more specific with the selector, you could add the textarea element...

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

Finally, by default, all hidden fields are ignored (not validated). It's unclear why you would need to validate textarea elements if they remain hidden because the user could never interact with them. You can add/remove rules from hidden fields and they will automatically validate when shown and not validate when hidden.

If you need to validate any fields that remain hidden, you will ned to override the default ignore settings. [] means "nothing". So ignore: [] means ignore nothing (validate everything).

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

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

相关推荐