Wie man Textarea und Radiobutton in einer Schleife validieren

Question

Ich brauche eine Hilfe. Ich habe mehrere Textbereiche, Optionsfelder und Dropdown-Listen, die durch Klicken auf eine Schaltfläche erstellt werden. Ich muss sie für Textarea validieren hat leeren Wert, Radio Button Check und Dropdown-Auswahl mit JavaScript/jQuery. Ich erkläre meinen Code unten.

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

Hier, wenn der Benutzer auf + Taste einige mehrere Textfeld klicken, wird, Optionsfeld und Dropdown-Liste dynamisch. Hier brauche ich, wenn mein Formular einreichen muss Ich muss die Validierung von allen überprüfen, ob diese nicht leer sind/überprüft. Bitte hilf mir.

Answer 1

Es gibt eine Reihe von Problemen mit Ihrem Code, aber insbesondere haben Sie den falschen Ansatz.

Beachten Sie, dass nachdem die Seite gerendert und das DOM angezeigt wurde, PHP beendet ist und kein PHP mehr ausgeführt werden kann. Also, wie machst du mehr Sachen in PHP? zwei Optionen:

(1) Formen oder
(2) AJAX - ist es ziemlich einfach, siehe these simple examples

Ajax Daten an eine Back-End-PHP-Datei angegeben sendet. Beachten Sie, dass Sie AJAX-Daten nicht in derselben Datei veröffentlichen können, die das AJAX-JavaScript enthält. Sie müssen eine zweite PHP-Datei verwenden.

Das Backend PHP-Datei empfängt die Daten verwendet, die eingehenden Daten (zB num von ques) neuen HTML in einem $ Variable zu erstellen und dann einfach echo s die Variable zurück in die Ausgangsdatei $, wo es empfängt in die .done()-Funktion (aka die Erfolgsfunktion), als eine Variable (z. B.). Wenn Sie HTML-Code zu erhalten, dann kann dieser Code über Methoden wie .append() oder .html() usw.

hier wieder in den DOM injiziert werden ist eine grobe Annäherung an, wie Sie vorgehen könnten.

$('#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>

---

Validieren Benutzer übermittelten Daten ist ein anderes Thema, aber die Grundidee ist oben, wenn der $('#ques') Wert gezeigt validiert ist - wenn leer, alarmieren wir eine Nachricht und return false um die Kontrolle an den Benutzer zurückzugeben.

Beachten Sie, dass Sie entweder clientseitig (jQuery) oder serverseitig (PHP) validieren können. Der Unterschied besteht darin, dass Sie, wenn Sie die Client-Seite validieren, die Kontrolle an den Benutzer zurückgeben können, ohne dass die eingegebenen Daten verloren gehen. Wenn Sie serverseitige Validierung, müssen Sie manuell die Kontrollen alle Benutzer eingegeben Daten und Re-bevölkern zurückschicken (dh es viel mehr Arbeit ist)

Beachten Sie auch, dass, wenn Sie Client-Seite zu validieren, und Sie haben ANY Bedenken über Hacking, dann müssen Sie auch Server-Seite erneut validieren, da clientseitige Validierung leicht gehackt werden kann. Aber wenn es serverseitige Validierung fehlschlägt werden Sie der Benutzer mit Ihrer Validierung monkeyed wissen und Sie können weniger Art sein über ihre Einträge neu bevölkern ...

Here is a basic example von clientseitigen Feldvalidierung.

Answer 2

Von dem, was ich von der Frage verstehen kann, habe ich abgeleitet, dass Sie ein Formular mit Eingabesteuerelementen haben. Der Benutzer kann '+' drücken, um ein div zu replizieren/klonen, das alle Eingaben enthält, wodurch ein zusätzliches Formular bereitgestellt wird, das mit Eingabesteuerelementen gefüllt ist. Wenn dies der Fall ist, können Sie Folgendes zur Überprüfung verwenden, um sicherzustellen, dass alle derzeit sichtbaren Eingabesteuerelemente mit Daten gefüllt wurden.

Voraussetzung: Stellen Sie sicher, dass allen Formularen derselbe Klassenname zugewiesen ist.

Beispiel:

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