Javascript 验证文本字段并将警告文本右键添加到文本框

当名称无效时，我正试图将警告文本添加到我的文本字段中。我有验证的代码，但是当输入无效时，我不能使一些文本出现

HTML代码：

<label for="fname">Firstname:</label> 
<input type="text" name="Firstname:" id="fname" size="40" />

您可以创建一个范围来容纳要显示的文本，然后将其插入文本框后。通过在文本框的

nextSibling

this.parentNode.insertBefore(warningSpan, this.nextSibling);

如果没有

nextSibling

，则

insertBefore

将足够智能，可以将其插入文本框之后：

完整代码：

var fname  = document.getElementById("fname");
fname.onchange = function() {
    var fn = /^[a-z\s]{2,30}$/i;
    if(!(fn.test(fname.value))) {
        //Insert text right to the textbox here!

        var warningSpan = document.createElement("span");
        warningSpan.className = "redTextClass";
        warningSpan.innerHTML = "Please enter a value";
        this.parentNode.insertBefore(warningSpan, this.nextSibling);
    } else {
        //no validation error, so we better remove it:
        var next = this.nextSibling;
        if (next && next.className === "redTextClass")
           this.parentNode.removeChild(next);
    }
}

---

谢谢，我只是不能把星星放在正确的位置，现在它在整个表单的末尾，而不是在个人输入字段之后

此外，当字段被验证时，我无法去除星号

Javascriptcode：

fnamn.onchange = function() {
            var fn = /^[a-zåäö\s]{2,30}$/i;
            if(!(fn.test(fnamn.value))) {
                var warningDiv = document.createElement("div");
                warningDiv.className = "star";

                var Astar = "*";
                var star = document.createTextNode(Astar);
                warningDiv.appendChild(star);

                fnamn.parentNode.insertBefore(warningDiv, this.fnamn);

            } else {
                var next = this.nextSibling;
                if (next && next.className === "star")
                this.parentNode.removeChild(next);
            }
        }

---

比写文本输入本身要好得多：-）

fnamn.onchange = function() {
            var fn = /^[a-zåäö\s]{2,30}$/i;
            if(!(fn.test(fnamn.value))) {
                var warningDiv = document.createElement("div");
                warningDiv.className = "star";

                var Astar = "*";
                var star = document.createTextNode(Astar);
                warningDiv.appendChild(star);

                fnamn.parentNode.insertBefore(warningDiv, this.fnamn);

            } else {
                var next = this.nextSibling;
                if (next && next.className === "star")
                this.parentNode.removeChild(next);
            }
        }