如何验证动态生成的文本区域和复选框

Question

这个问题在 StackOverflow 中似乎很常见。但是，我很难验证这些文本区域（不要留空）和复选框（至少应该选中一个）。我尝试了几个验证 Javascripts 和框架，但没有成功。

我有一个名为“case_title0[]”的文本区域，当用户单击“添加更多”按钮时，它会将数字“0”增加到“1”、“2”等等。我想在用户单击“添加更多”按钮时进行验证。

其次，我希望复选框 (name="editioncheck'+caseNum+'[]") 也是动态的，以限制用户将其留空。复选框看起来像“editioncheck0[]”、“editioncheck1[]”等等。需要至少检查一次才能继续下一个“添加更多”按钮。在此之前，“添加更多”按钮应保持非活动状态。

所以，我希望在我的表单中进行这两种类型的验证，即。文本区域和复选框。

这里使用的最简单的框架或自定义代码是什么？

我不想要花哨的显示，因为只有 alert() 框应该在这方面起作用。

Answer 1

为所有文本区域添加通用类，为所有复选框添加通用类并执行验证。

<textarea class="t"></textarea>
<textarea class="t"></textarea>
<textarea class="t"></textarea>
<textarea class="t"></textarea>

<input type="checkbox" class="c">

function validate() {
    var err = false;
    $('.t').each(function(){
         if($(this).text().length < 1) {
             err = true;
             return false;
         }
    });
    if(!err) {
         /* code to validate checkboxes like above */
    }
    return !err;
}

Answer 2

最后，我找到了解决方案，我将在此处发布。由于我的问题没有完全相同的解决方案，我不得不从头开始编写代码。虽然做了这么多在线资源，但对我帮助很大。

要即时验证文本区域（当用户单击“添加更多”按钮时动态生成文本区域），这是我应用的解决方案：

        var csn='case_title'+caseno; //here "caseno" is incremental number to uniquely identify elements
        var csum='case_summary'+caseno;

        var caset=document.getElementById(csn).value;
        var casesum=document.getElementById(csum).value;

        if (caset == null || caset == "") {
         alert("Executive Summary must be filled out");
         caseNum --;
        return false;

        }

        if (casesum == null || casesum == "") {
         alert("Summaries with links must be filled out");
         caseNum --;
        return false;       

接下来，要验证我所做的复选框，如下所示：

var edval='editioncheck'+caseno;
var checkBoxes=document.getElementsByClassName(edval);
        var isChecked = false;
        for (var i = 0; i < checkBoxes.length; i++) {
            if ( checkBoxes[i].checked ) {
                isChecked = true;
            };
        };

        if ( isChecked ) {
            //alert( 'At least one checkbox checked!' );
            } else {
                alert( 'Select at least one edition!' );
                caseNum --;
                return false;
            }   

解决方案似乎类似于fr34k的概念，非常感谢。但是，我在网上找到了这个http://jsfiddle.net/qyE97/

因此，每次用户单击“添加更多”按钮时，都会执行此脚本并验证文本区域和复选框。