Подтвердить текстовое поле и добавить текст-предупреждение прямо в текстовое поле

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 form, а не после индивидуального ввода.

Кроме того, я не могу избавиться от звезды, когда поле подтверждено.

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