텍스트 필드의 유효성을 검사하고 경고 텍스트를 텍스트 상자에 바로 추가하십시오.

Question

이름이 유효하지 않은 경우 텍스트 필드에 경고 텍스트를 추가하려고합니다. 유효성 검사를위한 코드가 있지만 입력이 잘못되었을 때 일부 텍스트를 표시 할 수 없습니다.

HTML 코드 :

는

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

자바 스크립트 코드 : 당신은 표시 할 텍스트를 유지하는 범위를 만들 수 있습니다

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의 끝 부분에있다. 전자 양식, 개별 입력 필드 후 아닙니다.

또한 필드의 유효성을 검사 할 때 별을 제거 할 수 없습니다.

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