javascript - 複数の同じ名前の動的追加入力を検証するにはどうすればよいですか？

こんにちは私は、同じ名前と動的な入力が追加された複数の入力に対して、javascriptまたはjquery（ただし、jqueryの検証プラグインは使用しない）でフォームの検証を行います。すべての入力が必要です。しかし、それは動作していません。この場合、どうすれば検証できますか？javascript - 複数の同じ名前の動的追加入力を検証するにはどうすればよいですか？

<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script type="text/javascript" src="jquery.form.js"></script> 
<script> 
    $(document).ready(function() { 
    var max_fields  = 10; //maximum input boxes allowed 
    var wrapper   = $(".input_fields_wrap"); //Fields wrapper 
    var add_button  = $(".add_field_button"); //Add button ID 

    var x = 1; //initlal text box count 
    $(add_button).click(function(e){ //on add input button click 
     e.preventDefault(); 
     if(x < max_fields){ //max input box allowed 
      x++; //text box increment 
      $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box 
     } 
    }); 

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text 
     e.preventDefault(); $(this).parent('div').remove(); x--; 
    }) 
}); 
</script> 
<script> 
function chk_null() 
{ 

    $('input[name="mytext[]"]').each(function() { 
     if($(this).val() == "") 
    { 
     alert("Please Fill"); 
     return false; 
    } 
}); 
} 
</script> 

</head> 
<body> 
    <form action="new2.php" method="post" onsubmit="return chk_null();"> 
    <div class="input_fields_wrap"> 
    <button type="button" class="add_field_button">Add More Fields</button> 
    <div><input type="text" name="mytext[]"></div> 
    <div><input type="text" name="mytext[]"></div> 

</div> 
<input type="submit" value="submit"> 
</form> 
</body> 
</html>

出典

2017-02-26 doflamingo

代わりをお勧めします。ボタンのタイプを「ボタン」に設定し、チェックがOKならば、フォームを送信してください。 Here the example.

<form action="new2.php" method="post"> 
. 
. 
. 
<input type="button" value="submit" onclick="chk_null();"> 
. 
. 
. 
function chk_null() { 
    var allFilled=true; 
    $('input[name="mytext[]"]').each(function() { 
     if ($(this).val() == "") { 
      alert("Please Fill"); 
      allFilled = false; 
     } 
    }); 
    if (allFilled) $('form').submit(); 
}

出典

2017-02-26 13:45:36 Baro

申し訳ありませんが、1つの警告メッセージだけを返信することはできますか？ – doflamingo

@doflamingoもちろん、 'allFilled = false;'の後に 'return false;'を追加してください。ここに更新された例：https://jsfiddle.net/amkcmnsb/1/ – Baro

これは動作しているようです。あなたのスクリプトを変更しようとすると、わずかにそれは何が起こっているかを片付けるかもしれません：

function chk_null() 
{ 
    var isValid = true; 
    $('input[name="mytext[]"]').each(function() { 
     if($(this).val() == "") 
     { 
      alert("Please Fill"); 
      isValid = false; 
     } 
    }); 
    return isValid; 
}

あなたは四つのフィールドでこれを実行し、1が充填されている場合は、3つのアラートを取得します。おそらく、複数のフィールドが入力されていない場合にのみ警告を1つだけ表示することで投げ飛ばされましたが、それはすぐに誤って返されたためでした。

出典

2017-02-26 13:39:03 rasmeister

javascript - 複数の同じ名前の動的追加入力を検証するにはどうすればよいですか？

答えて

関連する問題