0

ページに 5 つの入力ボックスがあります。フィールドが空白かどうかを確認したいのですが、その入力フィールドに追加されたスパンタグを使用してエラーメッセージを表示します。

これが私のコードです：

function validateForm() {   
// Declare all the local variable
var inputElements, inputId, inputType, i, inputLength, inputNode;

// Get all the input tags
inputElements = document.getElementsByTagName("input"); 

for(i = 0, inputLength = inputElements.length; i < inputLength; i++) {
    inputId = inputElements[i].id; // Get the input field ID
    inputType = inputElements[i].type; // Get the input field type

    // We will ONLY look for input[type=text]
    if(inputType === "text") {
        inputNode = document.getElementById(inputId);
        if(inputNode.value === "") {
            var spanTag = document.createElement("span"); 
            spanTag.innerHTML = inputFieldBlankErrorMessage;
            console.log(inputNode.appendChild(spanTag));
        }
    }       
}
return false; // Do Nothing

}

これは私が得ているものです ここに画像の説明を入力

入力タグの後に追加する必要があります。必要のない奇妙なタグを取得しています。助けてください！！！

4

3 に答える 3

2

には子孫がないため、ノードには.appendChild()何もできません。inputinput

代わりに、その後に新しいノードを挿入するか、同様のものを挿入する必要があります。

inputNode.parentNode.insertBefore(spanTag, inputNode.nextSibling);

デモ: http://jsfiddle.net/hMBHT/

于 2013-05-03T18:54:16.530 に答える
1

簡単に言えば、入力要素に要素を追加することは想定されていません。

おそらくあなたが望むのは次のようなものです：

<div class="field">
  <input type="text" name="bla"/>
  <span class="error">This field can't be blank!</span>
</div>

そのため、入力要素の前後にスパンを挿入する必要があります。 これがその方法を示す答えです。

于 2013-05-03T19:04:59.430 に答える
0

あなたの問題は、兄弟ではなく、入力の子としてスパンを追加しようとしていることにあると思います（これは、あなたが本当に望んでいるものだと思います）。

入力が DOM にどのように配置されているかがわからないため、実際の HTML を見ないとわかりませんが、別の親要素がある場合は、次のように置き換えます。

inputNode.appendChild(spanTag);

. . . と

inputNode.parentNode.appendChild(spanTag);

編集:参考までに、squint が以下に示したコード ( inputNode.parentNode.insertBefore(spanTag, inputNode.nextSibling);) は、すべての入力が同じ親要素の下にある場合にどのように実行できるかです。それはすべて、DOM 構造の設定方法に依存します。

于 2013-05-03T18:54:54.603 に答える