如何在循环中验证textarea和单选按钮 [英] How to validate textarea and radio button in a loop

问题描述

我需要一个帮助.我有一些通过单击按钮创建的多个textarea，单选按钮和下拉列表.我需要验证它们的textarea是否为空，使用JavaScript/jQuery进行单选按钮检查和下拉选择.我在下面解释我的代码.

I need one help. I have some multiple textarea, radio button and dropdown list which are created by clicking on a button. I need to validate them for textarea has blank value, radio button check and dropdown select using JavaScript/jQuery. I am explaining my code below.

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

在这里，用户将动态单击多个文本区域，单选按钮和下拉列表时，将在+按钮上单击.在这里，我需要提交表单的时间，我需要检查所有是否不为空/未选中​​的所有内容.请帮助我.

Here when user will click on + button some multiple textarea, radio button and dropdown list dynamically. Here I need when my form will submit I need to check the validation of all whether those are not blank/checked. Please help me.

推荐答案

根据我对问题的了解，我推断出您的表单带有输入控件.用户可以按"+"键来复制/克隆包含所有输入的div，从而提供一个填充有输入控件的附加表格.在这种情况下，您可以使用以下代码进行验证，以确保所有当前可见的输入控件都已填充数据.

From what I can understand from the question, I have deduced that you have a form with input controls. The user can press '+' to replicate/clone a div containing all input thus providing an additional form filled with input controls. If this is the case, you can use the following for validation to ensure that all currently visible input controls have been filled with data.

先决条件:确保为所有表单分配了相同的类名.

Pre-requisite: Ensure that all forms are assigned the same class name.

示例:

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

这篇关于如何在循环中验证textarea和单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！