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

Question

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"
        }
    });
});
});

Answer 1

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....
});