如何在循環中驗證textarea和單選按鈕

Question

我需要一個幫助。 我有一些通過單擊按鈕創建的多個textarea，單選按鈕和下拉列表。 我需要驗證它們的textarea是否為空白，使用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)
}

Answer 2

您的代碼有很多問題，但是特別是您使用了錯誤的方法。

請注意，在呈現頁面並顯示DOM之后，PHP已經完成，無法再運行任何PHP。 那么，如何在PHP中做更多的事情呢？ 兩種選擇：

（1）表格，或
（2）AJAX- 非常簡單，請參見以下簡單示例

Ajax將指定的數據發送到后端PHP文件。 請注意，您不能將AJAX數據發布到包含AJAX javascript的同一文件中。 您必須使用第二個PHP文件。

后端PHP文件接收數據，使用傳入的數據（例如疑問句的NUM）在$變量來創建新的HTML，然后只是echo s表示$變量回原文件，它是在接收.done()函數（又稱成功函數），作為變量（例如recvd ）。 如果您收到HTML代碼，則可以通過.append()或.html()等方法將該代碼重新注入DOM中。

這是您大概如何進行的粗略估計。

 $('#plus').click(function(){ addQuestionField(); }); $('#minus').click(function(){ deleteQuestionField(); }); function addQuestionField(){ var numques = $("#ques").val(); if(numques==null || numques==''){ alert('Please add no of questions'); return false; } var myAj = $.ajax({ type: 'post', url: 'ajax.php', data: 'numques=' + numques, }); myAj.done(function(recvd){ $('#container').append(recvd); }); } 

 <style> #d1 {width:24%; float:left; padding:10px;} #d2 {padding-bottom:10px;} </style> <div id="d1" style="">No of questions : <input id="ques" class="form-control" placeholder="no of question" type="text" /> </div> <div id="d2"> Questions : <input type="button" class="btn btn-success btn-sm" name="plus" id="plus" value="+"> <input type="button" class="btn btn-danger btn-sm" name="minus" id="minus" value="-"> </div> 

---

驗證用戶提交的數據是一個單獨的問題，但是在驗證$('#ques')值時，上面顯示了基本思想-如果為空，我們將提示消息並return false以將控制權返回給用戶。

請注意，您可以驗證客戶端（jQuery）或服務器端（PHP）。 不同之處在於，當您驗證客戶端時，您可以將控制權交還給用戶，而不會丟失他們鍵入的任何內容。 在驗證服務器端時，必須發回所有用戶輸入的數據並手動重新填充控件（即，這需要做很多工作）

還要注意，如果您驗證客戶端，並且對黑客有任何擔憂，則還必須重新驗證服務器端，因為客戶端驗證很容易被黑客入侵。 但是，如果它無法通過服務器端驗證，您將知道用戶無所適從，並且重新填充其條目的方式可能會不太友好...

這是客戶端字段驗證的基本示例 。