テキストフィールドを検証し、警告テキストをテキストボックスに追加する

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

ありがとう、私はちょうど正しい位置に星を得ることはできません、今それはwholの終わりです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); 
      } 
     }