驗證textfield並將警告文本右鍵添加到文本框

Question

我試圖在名稱無效時向我的文本框添加警告文本權限。我有驗證的代碼，但當輸入無效時，我無法顯示一些文本。

HTML代碼：

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

的Javascript代碼：

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

    } 
} 

Answer 1

DEMO

您可以創建一個跨度來保存你要顯示的文字，然後後插入文本框。您可以通過之前插入新跨越做到這一點，文本框的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); 
    } 
} 

Answer 2

謝謝，我只是不能讓明星處於正確的位置，現在它已經到了最後e表單，而不是單個輸入字段之後。

另外，當字段驗證時，我無法擺脫星。

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); 
      } 
     }