Question

这个似乎是StackOverflow中非常常见的问题。但是，我很难验证这些textarea（不留空）和复选框（至少应检查一个）。我尝试了几个验证Javascripts和框架但是徒劳无功。

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

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

所以，我希望以我的形式进行这两种类型的验证，即。 textarea和复选框。

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

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

Answer 1

将所有textareas和公共类的公共类添加到所有复选框并执行验证。

<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

最后，我已经找到了解决方案，我将在此处发布。因为我的问题没有完全相似的解决方案，所以我必须从头开始编码。虽然这样做很多在线资源对我帮助很大。

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

        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/

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

如何验证动态生成的textarea和复选框

2 个答案: