Validierungsformular für dynamisch erstellte Eingänge zählen

Ich erstelle dynamisch die Eingaben im FormularValidierungsformular für dynamisch erstellte Eingänge zählen

Ich möchte Benutzer mindestens 'n' Elemente eingeben.

<html lang="en-US"> 

    <head> 
    <meta name="referrer" content="origin"> 
    <script> 
     var counter = 0; 
     var limit = 50; 

     function addInput(divName, arrName){ 
      if (counter == limit) { 
        alert("You have reached the limit of adding " + counter + " inputs"); 
      } 
      else { 
        var newdiv = document.createElement('div'); 
       var af = "autofocus" 
        newdiv.innerHTML = "<input id='my-div-"+counter+"' type='text' name='" + arrName + "[]' required autofocus=" + af + ">"; 
        document.getElementById(divName).appendChild(newdiv); 
        document.getElementById('my-div-'+counter).focus(); 
        counter++; 
      } 
     } 

    function validateForm(){ 
     var frm = document.forms['simples']; 
     a = parseInt(frm.elements['myInputs_1[]'].length) 
     var sum = parseInt(frm.elements['myInputs_1[]'].length) 
     if(parseInt(sum) < 4){ 
      alert("You must write at least 4 sentences "); 
      return false; 
     } 
    } 

    </script> 
    </head> 

    <body> 
      <form name="simples" action="part.php" align="center" onsubmit="return validateForm()" method="POST"> 
         <div id = "dynamicInputHolder_1"> 
         <b>Emotion </b><input type="text" value="" name="emotion" id="emotion" class="generatedEmotion" readonly> 
         <input type="hidden" value="" name="uniqueID" id="uniqueID"> 
         <div id="dynamicInput_1"> 
           <textarea rows="5" cols="50" readonly class="floating-box"> 
    John arrived at Sally's house to pick her up. John and Sally were going to a fancy restaurant that evening for a dinner. John was little nervous because he was going to ask Sally to marry him.</textarea> 
         </div> 
         <input type="button" value="Add connecting sentences" onClick="addInput('dynamicInput_1', 'myInputs_1');"> 
         </div> 

        <br> 
       <input type="submit" value="show me what is next"> 
       </form> 

    </body> 
    </html>

Verfahren validateForm() nur wenn Anzahl Textfelder sind größer gleich 2 ist, für 0 und 1 funktioniert es nicht funktioniert.

Bitte nicht, dass diese minimal Beispiel ist, in echten Website, habe ich viele solche div s Eingang in mehreren Arrays zu sammeln, so dass ich sie über etwas bin Summieren wie:

var sum = parseInt(frm.elements['myInputs_1[]'].length) + parseInt(frm.elements['myInputs_2[]'].length) + parseInt(frm.elements['myInputs_3[]'].length)

aber es kann passieren, dass einige der Arrays leer sind.

Wie überprüfe ich, dass insgesamt mindestens n Eingänge vorhanden sind?

Quelle

2017-11-09 Adorn

@cabe45, 'myInputs_1 []' ist NICHT ein div, es ist ein Name für das Element input type und wegen '[' '' 'ist es ein' html' Array. Was meinst du damit, wie kannst du nehmen? Es ist im Code. Ich habe die Antwort auf diese Frage verwiesen: https://stackoverflow.com/questions/7227917/getting-html-array-length-with-javascript – Adorn

Ich sehe jetzt, nur versuchen, die Frage zu verstehen ... – clabe45

frm.elements['myInputs_1[]'] hat ein anderes Verhalten für jeden der Fälle.

für keine Elemente eingegeben wird, wird es

für 1 Element undefiniert, es nur dieses Element enthält, so dass er nicht über eine Länge

für zwei Elemente ab es ein Objekt des Typs RadioNodeList, welches von NodeList geerbt wird und ein length Attribut hat.

so das Validate-Formularmethode ändert sich auf:

function validateForm(){ 
    var frm = document.forms['simples']; 
    ele = frm.elements['myInputs_1[]']; 
    if(typeof ele === 'undefined'){ 
     alert('no element at all..'); 
     return false; 
    } 

    else if(ele.value == ""){ 
     if (ele.length < 4){ 
      alert("You must write at least 4 sentences "); 
      return false; 
     } 
    } 
    else{ 
     alert('contains one element'); 
     return false; 
    } 
    return true; 
}

und es funktioniert!

Quelle

2017-11-10 15:21:55 Adorn

Validierungsformular für dynamisch erstellte Eingänge zählen

Antwort

Verwandte Themen