0

我的页面中有 5 个输入框。我想检查是否有任何字段为空白，我将使用附加到该输入字段的 span 标签显示错误消息。

这是我的代码：

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()对一个input节点做任何事情，因为一个input可以没有后代。

相反，您应该在它之后插入新节点，或类似的东西。

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

我相信您的问题是您试图将跨度附加为输入的孩子，而不是兄弟姐妹（我相信这是您真正想要的）。

如果没有看到您的实际 HTML，我无法确定，因为我不知道您的输入在 DOM 中的位置，但如果它们有单独的父元素，那么您将替换：

inputNode.appendChild(spanTag);

. . . 和

inputNode.parentNode.appendChild(spanTag);

编辑：仅供参考，如果所有输入都在同一个父元素下，斜视在下面给出的代码（inputNode.parentNode.insertBefore(spanTag, inputNode.nextSibling);）将是你如何做到这一点。这完全取决于如何设置 DOM 结构。

于 2013-05-03T18:54:54.603 回答