入力配列の検証1つだけのランダムなフィールドがJavaScriptで埋められます

Question

5行からの配列入力を検証する必要があります（ユーザー名、型、要求）JavaScriptまたはjQueryを使用して1行しか必要ではなく、行。管理者は、Name 3またはName 5に記入することができます。

私はname[]とforeachを使用してPHPで検証して成功しましたが、javascriptではname+$iしか使用できません。しかし、その検証は私のPHP要件とは大きく異なっています。

<form action="x" method="post"> 
<?php for ($i=1; $i<=5; $i++) { ?> 
    <div> 
     <span id="username-error<?php echo $i; ?>"></span> 
     <label>Name <?php echo $i; ?></label> 
     <select name="username[]" id="username<?php echo $i; ?>"> 
     <option>user 01</option> 
     <option>user 02</option> 
     <option>user 03</option> 
     </select> 
    </div> 
    <div> 
     <span id="type-error<?php echo $i; ?>"></span> 
     <label>Type</label> 
     <select name="type[]" id="type<?php echo $i; ?>"> 
     <option>type 01</option> 
     <option>type 02</option> 
     <option>type 03</option> 
     </select> 
    </div> 
    <div> 
     <span id="request-error<?php echo $i; ?>"></span> 
     <label>Request</label> 
     <input type="text" name="request[]" id="request<?php echo $i; ?>"> 
    </div> 
    <button type="submit" id="submit">Submit</button> 
<?php } ?> 
</form> 

submitクリックで私のjQueryコード：

$("#submit").on("click", function() { 
for (var i = 1; i<=5; i++) 
{ 
    var name = $("#username"+i).val(); 
    var type = $("#type"+i).val(); 
    var request = $("#request"+i).val(); 
    if (i == 1) 
    { 
     if (name == '') { 
     $("#username-error"+i).html('User '+i+' name must be selected'); 
     return !1; 
     } 
     else if (type == '') { 
     $("#type-error"+i).html('Type '+i+' name must be selected'); 
     return !1; 
     } 
     else if (request == '') { 
     $("#request-error"+i).html('Request '+i+' name must be filled'); 
     return !1; 
     } 
    } 
    // else ... no problem here only validate if name selected, 
    // other fields like type and request must be selected and filled ... 
} 
}); 

私は唯一の形式はJavascriptで（i = 1を使用して）、固定フィールドの空ではありません確認することができます。つまり、管理者は最初の行に入力する必要があります。そのため、PHPの検証では、すべての行からの入力を受け付け、必要な行のみを受け入れることができます。

私は必要なJavaScriptやjQueryの検証ルール：

だから、

1. After pages & form (5 rows -> name,type,request) load 
2. Button submitted click without fill any form 
    > Alert message (at least one row are filled !) 
3. Fill 1 complete user, type and request data on random rows, example row 3 (Name 3) 
4. Click on submit again, then success process data 

、検証ルールで、それは私のPHPと同じ状態になります、それは、任意の行の管理者に充填することができるしたかったです。ちょうどi = 1に。

私はi = 3またはi = 4に記入することができるので、フィールドの1行だけが必要であり、それはランダムな行であることを検証するためにJavaScriptをチェックインする方法はわかりません。

でも、find('input[name="username[]"]').val())です。

Answer 1

1. JSにはelseifはありません。
2. だけループと最後には何も存在しない場合、エラーに
を与える
3. フォームにIDを付けて提出するイベント
4. を使用=「送信」またはID =フォーム
に「提出」の名前を使用しないでください

$("#formId").on("submit", function(e) { 
    var name = ""; 
    $("#username-error").empty(); // clear errors 

    $("[id^=username]").each(function() { // any field id=username* 
    name = $(this).val(); 
    if ($.trim(name) !== '') return false; // stop loop, something was filled 
    }); 
    if (name == "") { // no names were filled, alert on the first 
    $("#username-error").html('At least one name must be selected'); // any of them, right? 
    e.preventDefault(); // stop submission 
    } 
}); 

Full example - ignores other fields if name is not filled

Example that does not allow partial input