53

私はフォームを持っています:

<form method="POST" action="submit.php">
    <input type="text" value="1">
    <input type="text" value="2">
    <input type="text" value="3">
    <input type="text" value="4">
    <button type="submit">Submit</button>
</form>

フォーム内の入力要素をループするにはどうすればよいですか (検証を実行するため)。

jQuery やその他のライブラリではなく、純粋な JavaScript のみを使用することをお勧めします。また、フォームに追加される可能性のある他の要素ではなく、反復をフォーム要素に制限したいと思います。

4

7 に答える 7

53

フォームの参照を取得する必要があり、その後、elementsコレクションを反復できます。たとえば、次のように仮定します。

<form method="POST" action="submit.php" id="my-form">
  ..etc..
</form>

次のようなものがあります。

var elements = document.getElementById("my-form").elements;

for (var i = 0, element; element = elements[i++];) {
    if (element.type === "text" && element.value === "")
        console.log("it's an empty textfield")
}

querySelectorAll をサポートするブラウザーでは、次のようなこともできることに注意してください。

var elements = document.querySelectorAll("#my-form input[type=text][value='']")

そしてelements、空の値属性を持つ要素だけが含まれます。ただし、値がユーザーによって変更された場合、属性は同じままになるため、このコードはオブジェクトのプロパティではなく、属性によってのみフィルタリングすることに注意してください。もちろん、2 つのソリューションを混在させることもできます。

var elements = document.querySelectorAll("#my-form input[type=text]")

for (var i = 0, element; element = elements[i++];) {
    if (element.value === "")
        console.log("it's an empty textfield")
}

基本的に 1 つのチェックを保存します。

于 2013-11-14T13:26:07.683 に答える
14

getElementsByTagName関数を使用できます。これは、指定されたタグ名を持つ要素の HTMLCollection を返します。

var elements = document.getElementsByTagName("input")
for (var i = 0; i < elements.length; i++) {
    if(elements[i].value == "") {
        alert('empty');
        //Do something here
    }
}

デモ

document.myform.getElementsByTagNameyoyフォームに名前を付けていれば、使用することもできます

フォーム名付きデモ

于 2013-11-14T13:19:11.410 に答える
2 
<form id="yourFormName" >
<input type="text" value="" id="val1">
<input type="text" value="" id="val2">
<input type="text" value="" id="val3">
<button type="button" onclick="yourFunction()"> Check </button>
</form>
<script type="text/javascript">
function yourFunction()
{
  var elements = document.querySelectorAll("#yourFormName input[type=text]")
  console.log(elements);
  for (var i = 0; i<elements.length; i++ )
  {
    var check = document.getElementById(elements[i].id).value);
    console.log(check);
    // write your logic here
  }
}
</script>
于 2019-11-22T03:39:56.913 に答える
1 
$(function() {
    $('form button').click(function() {
        var allowSubmit = true;
        $.each($('form input:text'), function(index, formField) {
            if($(formField).val().trim().length == 0) {
                alert('field is empty!');
                allowSubmit = false;
            }
        });
        return allowSubmit;
    });
});

デモ

于 2013-11-14T13:28:05.080 に答える