如何驗證循環中的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

你的代碼有很多問題，但特別是你有錯誤的方法。

請注意，在頁面呈現並顯示DOM之後，PHP已經完成並且不再有PHP可以運行。 那麼你如何在PHP中做更多的東西？有兩個選項：

（1）形成，或
（2）AJAX - 它很容易，見these simple examples

阿賈克斯發送指定的數據到後端PHP文件。 請注意，您不能將AJAX數據發佈到包含AJAX javascript的文件。您必須使用第二個PHP文件。

後端PHP文件接收數據，使用傳入數據（例如問題數量）在$變量中創建新的HTML，然後只需echo s $ $回到原始文件，功能（又名成功功能），作爲變量（例如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）。區別在於，當您驗證客戶端時，您可以將控制權返回給用戶，而不會丟失任何輸入的內容。當你驗證服務器端時，你必須發回所有用戶輸入的數據並手動重新設置控件（即，它有很多工作）

另外請注意，如果你驗證客戶端，並且你有任何關注黑客攻擊，那麼您還必須重新驗證服務器端，因爲客戶端驗證可能很容易被黑客入侵。 但如果失敗了服務器端驗證你就會知道用戶與你的驗證monkeyed，你可以對重新填充他們的作品不怎麼樣...

客戶端字段驗證的Here is a basic example。

Answer 2

從我能理解的問題中，我推斷出你有一個帶有輸入控件的表單。用戶可以按'+'複製/克隆包含所有輸入的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) 
}