javascript - 如何在循环中验证文本区域和单选按钮

Question

我需要一个帮助。我有一些多个文本区域、单选按钮和下拉列表，它们是通过单击按钮创建的。我需要使用 JavaScript/jQuery 验证它们的文本区域是否具有空白值、单选按钮检查和下拉选择。我在下面解释我的代码。

<div style="width:24%; float:left; padding:10px;">No of questions : 
<input name="no_of_question" id="ques" class="form-control" placeholder="no of question" value="<?php if($_REQUEST['edit']) { echo $getcustomerobj->no_of_question; } else { echo $_REQUEST['no_of_question']; } ?>" type="text" onkeypress="return isNumberKey(event)">
</div>
<div style="padding-bottom:10px;">
Questions : <input type="button" class="btn btn-success btn-sm" name="plus" id="plus" value="+" onClick="addQuestionField();"><input type="button" class="btn btn-danger btn-sm" name="minus" id="minus" value="-" onClick="deleteQuestionField();">
</div>

<script>
function addQuestionField(){
    var get =$("#ques").val();
    if(get==null || get==''){
        alert('Please add no of questions');
    }else{
        var counter = 0;
        if (counter > 0){
            return;
        }else{
             counter++;
              <?php
                   $status=array("status"=>'1');
                   $feeddata=$db->kf_answertype->find($ustatus); 
            ?>
            <?php
                 $status=array("status"=>'1');
                $feeddatascale=$db->kf_scale->find($ustatus);
            ?>
             for(var i=1;i<get;i++){

                  $('#container').append('<div><div style="width:24%; float:left; padding:10px;"> <textarea class="form-control" name="questions'+ i +'" id="questions'+ i +'" placeholder="Questions"  style="background:#FFFFFF;"  rows="2"><?php if($_REQUEST['edit']) { echo $getcustomerobj->questions; } else { echo $_REQUEST['questions']; } ?></textarea></div><div style="float:left;margin-top:37px;"><div style="float:left; margin-right:10px;"><?php foreach($feeddata as $v){?> <input type="radio" name="answer_type'+i+'" id="answer_type0" onClick="selectScale(this.value,'+i+');" value="<?php echo $v['_id']; ?>"> <?php echo $v['answertype']; ?> <?php }?></div><div style="float:left; margin-top:-10px;display:none;" id="scaleid'+i+'"><select class="form-control" id="nscale'+i+'" name="noofscale'+i+'"><option value="">Select Answer Type</option><?php foreach($feeddatascale as $v){ ?><option value="<?php echo $v['_id']; ?>" <?php if($getcustomerobj->no_of_scale == $v['_id'] or $_REQUEST['no_of_scale'] == $v['_id']){ print 'selected'; } ?>><?php echo $v['noofscale']; ?></option><?php } ?></select></div><div style="clear:both;"></div></div><div style="clear:both;"></div></div>');

             }

        }
    }
}
</script>

这里，当用户单击+按钮时，会动态地显示多个文本区域、单选按钮和下拉列表。在这里，当我的表单提交时，我需要检查所有内容的验证是否不为空白/选中。请帮助我。

Answer 1

根据我对问题的理解，我推断您有一个带有输入控件的表单。用户可以按“+”来复制/克隆包含所有输入的 div，从而提供填充有输入控件的附加表单。如果是这种情况，您可以使用以下内容进行验证，以确保当前所有可见的输入控件都已填充数据。

先决条件:确保所有表单都分配有相同的类名。

示例:

var visibleDivs = $(".DisplayableDiv:visible"); // .DisplayableDiv name of all class containing form controls
var hasValue = true;
// loop over all visible divs
for(i = 0; i < visibleDivs.length; ++i)
{
    $(visibleDivs[i]).find('input')
    .each(function() { // iterates over all input fields found
        if($.trim($(this).val()).length === 0) {
            hasValue = false; // if field found without value
            break;
        }
    });
}

if(hasValue === false) {
    // handle validation logic here (prompt user to complete all input areas etc)
}