FOR LOOPを使用したJavascriptフォームのバリデーション

Question

JavaScript内でforを使用して、フォーム検証にJavaScriptに関するヘルプが必要です。

私はユーザー名とパスワード用の5つのフィールドを含むフォームを持っており、フォームを検証してデータベースに送信する前にJavaScriptを使用する必要があります。あなたが、私はこれが私の見解からのコードがあるhere in this JsFiddle

または

必要なコードと結果を見ることができます

は：

<form action="insertMember" method="post" name="fmember" onsubmit="return validateMember()"> 
    <div class="form-group"> 
     <label>Shop</label> 
     <select> 
      <option value="">Choose The Host</option> 
      <option value="1">Shop 1</option> 
      <option value="2">Shop 2</option> 
     </select> 
    </div> 
    <?php 
    $max = 5; 
    for($i=1; $i<=$max; $i++) { ?> 
     <span class="error<?php echo $i; ?>" class="label label-danger"></span> 
     <label>Username <?php echo $i; ?></label> 
     <input type="text" name="user[<?php echo $i; ?>]"> 
     <label>Password <?php echo $i; ?></label> 
     <input type="password" name="pass[<?php pass $i; ?>]"> 
     <span class="errorp<?php echo $i; ?>" class="label label-danger"></span> 
    <?php } ?> 
</form> 

これは私のJavascriptを（まだエラーからのコードです）：

// How to validate input using FOR LOOP ? 
// $max or max can be changes to 10 or more. 
function validateMember() { 
// I got an error from here. 
     var max = 3; 
    var member = []; 
    var password = []; 
    for(var i=1; i<=max; i++) { 
     var member = document.forms.fmember.user[i].value; 
     var password = document.forms.fmember.pass[i].value; 
     // Validate only username 1 must be filled or return error message 
     if(i == 1) { 
     if(member[i] == '') { 
      document.getElementByID('error'+i).innerHTML = 'Username Must be Filled !'; 
      return !1; 
     } 
     else if (password[i] == '') { 
       document.getElementByID('errorp'+i).innerHTML = 'Password Must be Filled !'; 
      return !1; 
     } 
     else { 
      return !0; 
     } 
     } 
     else { 
     // Validate if username 2 until MAX are filled must have min length = 2 
     if(member[i] != '') { 
       if(member[i].length < 2) { 
         document.getElementByID('error'+i).innerHTML = 'Username Must Have Minimum 2 Characters'; 
         return !1; 
       } 
      else { 
          return !0; 
       } 
     } 
     } 
    } 
} 

Answer 1

複数の問題がここにあります

1. 入力要素の名前属性値を配列構文に

   <input type="text" name="user[1]"> 
   

   を持っていますが、JavaScriptでそれらにアクセスする際、document.forms.fmemberが含まれていません。キー配列 - 各要素には一意のキーがあります。コンソールでこれを実行してみてください：Object.keys(document.forms.fmember.elements)

   var password = document.forms.fmember["pass["+i+"]"].value; 
   

： password変数の

var member = document.forms.fmember["user["+i+"]"].value; 

と同じ：に

var member = document.forms.fmember.user[i].value; 

：

["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "shop", "user[1]", "pass[1]", "user[2]", "pass[2]", "user[3]", "pass[3]", "user[4]", "pass[4]", "user[5]", "pass[5]"] 

だから、この行を更新します。あなたは、以下のような配列が表示されるはずです

2. テキスト入力値を含む変数（例： memberとpassword）ので、ちょうど代わりif(member[i] == '') {のif(member == '') {を使用し、空の文字列をチェックするために、文字列型の値を持っている...

）は、以下のアクション（またはupdated plunkerでこれらの変更を参照してください。

$('#shop').on('change',function() { 
 
\t \t $('#input').fadeIn(1000); 
 
\t \t if ($('#shop').val() == '') { 
 
    \t \t $('#input').fadeOut(500); 
 
    } 
 
}); 
 

 
// The question is HERE 
 
// How to validate input using FOR LOOP ? 
 
// Because the $max or max can be changed to 10 or more. 
 
function validateMember() { 
 
// I got an error from here. 
 
\t \t var max = 3; 
 
    var member = []; 
 
    var password = []; 
 
    for(i=1; i<=max; i++) { 
 
    \t \t var member = document.forms.fmember["user["+i+"]"].value; 
 
     var password = document.forms.fmember["pass["+i+"]"].value; 
 
     // Validate only username 1 must be filled or return error message 
 
     if(i == 1) { 
 
     if(member== '') { 
 
     \t  document.getElementById('error'+i).innerHTML = 'Username Must be Filled !'; 
 
     \t  return !1; 
 
     } 
 
     else if (password == '') { 
 
     \t \t \t document.getElementById('errorp'+i).innerHTML = 'Password Must be Filled !'; 
 
      \t return !1; 
 
     } 
 
     else { 
 
      return !0; 
 
     } 
 
     } 
 
     else { 
 
     // Validate if username 2 until MAX are filled must have min length = 2 
 
     if(member != '') { 
 
     \t \t if(member.length < 2) { 
 
     \t \t \t \t \t document.getElementByID('error'+i).innerHTML = 'Username Must Have Minimum 2 Characters'; 
 
     \t \t \t \t return !1; 
 
     \t \t } 
 
      else { 
 
     \t \t \t \t \t \t return !0; 
 
     \t \t \t } 
 
     } 
 
     } 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<!-- This code is not the actually code, this code is just for an example --> 
 
<div id="#formMember"> 
 
    <h3>Input Member</h3> 
 
    <form name="fmember" onsubmit="return validateMember()"> 
 
     <div> 
 
     <label>shop</label> 
 
     <select id="shop"> 
 
      <option value="">Choose The Shop..</option>    
 
      <option value="1">Shop 1</option>    
 
      <option value="2">Shop 2</option> 
 
     </select> 
 
     </div> 
 
     <hr /> 
 
     <div id="input"> 
 
     <!-- This is actually use PHP for loop, i dont know how to use it at JsFiddle 
 
     <?php 
 
     $max = 3; //so sometimes we can change it if want to add more fields. 
 
     for($i=1; $i<$max; $i++) { ?> 
 
     <div class="form-group"> 
 
      <span class="error<?php echo $i; ?>" class="label label-danger"></span> 
 
      <label>Username <?php echo $i; ?></label> 
 
      <input type="text" name="user[<?php echo $i; ?>]"> 
 
      <label>Password <?php echo $i; ?></label> 
 
      <input type="password" name="pass[<?php pass $i; ?>]"> 
 
      <span class="errorp<?php echo $i; ?>" class="label label-danger"></span> 
 
     </div> 
 
    <?php } ?> 
 
     --> 
 
     <h4>This is just an example after this form submitted</h4> 
 
      <div class="form-group"> 
 
       <span id="error1" class="label label-danger">Username 1 Must be Filled !<br></span> 
 
       <label>Username 1</label> 
 
       <input type="text" name="user[1]"> 
 
       <label>Password 1</label> 
 
       <input type="password" name="pass[1]"> 
 
       <span id="errorp1" class="label label-danger">Password 1 Must Be Filled !<br></span> 
 
      </div> 
 
      <div class="form-group"> 
 
       <span id="error2" class="label label-danger">Username 2 Must Have Minimum 2 Characters !<br></span> 
 
       <label>Username 2</label> 
 
       <input type="text" name="user[2]" value="a"> 
 
       <label>Password 2</label> 
 
       <input type="password" name="pass[2]" value="xxxxx"> 
 
       <span id="errorp2" class="label label-danger"></span> 
 
      </div> 
 
      <div class="form-group"> 
 
       <span id="error3" class="label label-danger"></span> 
 
       <label>Username 3</label> 
 
       <input type="text" name="user[3]"> 
 
       <label>Password 3</label> 
 
       <input type="password" name="pass[3]"> 
 
       <span id="errorp3" class="label label-danger"></span> 
 
      </div> 
 
      <div class="form-group"> 
 
       <span id="error4"></span> 
 
       <label>Username 4</label> 
 
       <input type="text" name="user[4]" value="username2"> 
 
       <label>Password 4</label> 
 
       <input type="password" name="pass[4]"> 
 
       <span id="errorp4" class="label label-danger">Password 4 Must Be Filled !<br></span> 
 
      </div> 
 
      <div class="form-group"> 
 
       <span id="error5"></span> 
 
       <label>Username 5</label> 
 
       <input type="text" name="user[5]"> 
 
       <span id="errorp5"></span> 
 
       <label>Password 5</label> 
 
       <input type="password" name="pass[5]"> 
 
      </div> 
 
      <button type="submit" class="col-sm-offset-2 btn btn-primary"> 
 
      Submit 
 
      </button> 
 
     </div> 
 
    </form> 
 
</div>

最新の質問

• 1.
• 2.
• 3.
• 4.
• 5.

 関連する問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.