동적으로 텍스트 입력을 확인하십시오.

Question

필수 입력란마다 상자 뒤에 별표가있는 입력 양식을 만들고 싶습니다. 사용자가 문자열을 입력하면 별표는 느낌표로 변경됩니다. 지금 자바 스크립트 코드는 사용자가 문자를 입력 할 때마다 느낌표를 추가합니다.

HTML :

<form name="form1"> 
<ul> 
<li><input type='text' name ='text1' required placeholder="required"/></li> 
<li><input type='text' name ='text1' required placeholder="required"/></li> 
<li><input type='text' name ='text1' placeholder="not required"/></li> 
</ul> 
</form> 

JAVA/JQUERY : 당신이 도움을

$(function() { 
     $('input:required').after("<span>*</span>"); 

    }); 

$('input:required').keyup(function(){ 
    var dInput = this.value; 
    if(dInput.length > 0) 
    //if($('input:required').is(':valid')) 
    { 
     $(this).after("<span>!</span>") 
    } 
}); 

들으!

Answer 1

메인에 문제가 .after가 span 요소 당신이를 호출 할 때마다 추가하는 것입니다, 당신은 .parent().children("span")를 사용하여 previsouly 생성 스팬 요소를 다시 가져온 다음의 내용으로 변경할 수 있습니다

$(this).parent().children("span").text("!") 

을 대신 :

$(this).after("<span>!</span>") 

이것은 코드를 수정하는 가장 간단한 방법이지만, 원하는 작업을 수행하는 최선의 방법은 아닙니다.

$('input').keyup()은 완전한 제어 실시간 유효성 검사를위한 좋은 접근 방법이지만 validation plugin of jQuery을 살펴볼 수도 있습니다.

$(function() { 
    $('input:required').each(function(index) { 
     var id = this.form.name+this.name+"mark"; 
     $(this).after("<span id='"+id+"'>*</span>"); 
    }); 
}); 

$('input:required').keyup(function(){ 
    if(this.value.length > 0) { 
     var id = this.form.name+this.name+"mark"; 
     $("#"+id).text("!"); 
    } 
}); 

:

편집

예 A span ID를 사용하는 대신 DOM 트리를 탐색, 이것은 당신이 자바 스크립트 코드를 깨지 않고 HTML 트리에 어디서나 span 태그를 이동할 수 있습니다 것

이 기능을 사용하려면 양식에 고유 한 이름이 있어야합니다.

또한주의 그 span 태그와 자신의 id를 대응하는 정적 HTML로 작성 또는 대신 자바 스크립트의 클라이언트에 의해 생성되는 서버에서 생성 할 수있다.

Answer 2

.foucsout()을 사용해야합니다. 텍스트 필드에서 포커스가 사라지 자마자 Tab 키를 눌러 다음 필드 나 버튼으로 이동하십시오. 길이에 대한 .focusout() 콜백에서 테스트하고 '!'를 추가하십시오.

또한 @zakinster 솔루션을 참조하십시오. 그의 해결책은 '*'를 '!'로 대체하는 데 도움이 될 것입니다. 나는 이것을 이해했다. 나는 .focusout()을 제안했는데, 사용자가 입력을 완료했을 때 별표를 느낌표로 바꾸고 입력을 판단 할 수있게했다.