動的に作成された入力の数を検証するフォーム

私は動的に入力をフォームに作成しています動的に作成された入力の数を検証するフォーム

少なくとも「n」個の要素を入力します。

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

番号テキストボックスは、それが動作しない0と1、2に等しいより大きい場合にのみ動作しvalidateForm()方法。

これは最低限の例があることを、実際のWebサイトでは、私は複数のアレイでの入力を収集し、多くのそのようなdiv秒を持っているので、私はのようなものの上にそれらを合計していないしてください：

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

それが起こるかもしれません配列のうち空のものはほとんどありません。

少なくともn個の入力がまとめてあることを確認するにはどうすればよいですか？

出典

2017-11-09 Adorn

@clabe45、 'myInputs_1 []'はdivではなく、入力型要素に与えられた名前で、 '[' ']'のために 'html'配列です。どうやって取ることができるのですか？それはコードの中にあります。私はこの質問の答えを参考にしました：https://stackoverflow.com/questions/7227917/getting-html-array-length-with-javascript – Adorn

私は今、質問を理解しようとしています... – clabe45

frm.elements['myInputs_1[]']はそれぞれのケースで異なる動作をします。いかなる要素が入力されていないため

、それは1つの要素の

が不定となり、それだけ、その要素が含まれ、それ以降、それはタイプRadioNodeListの目的である二つの要素のための長さ

を有していません、これはNodeListから継承され、length属性を持ちます。

にその検証のフォームメソッドの変更：

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

、それが動作します！

出典

2017-11-10 15:21:55 Adorn

動的に作成された入力の数を検証するフォーム

答えて

関連する問題