javascript addevent listener로 부트 스트랩 html 폼의 입력 유효성 검사

Question

자바 스크립트의 addeventlistener를 사용하여 html의 텍스트 상자 요소 값을 확인하는 데 어려움이 있습니다. 다음과 같은 방법으로 입력 내용의 유효성을 올바르게 검사하지 않습니다.

1) 해당 텍스트 상자에 값이있는 경우에도 "필드가 비어 있습니다." 2) 제출을 클릭 할 때만 유효합니다. < - (사용자가 텍스트 상자에서 클릭하는 내가 유효성 검사를 수행하는 방법)을

다음은 (부트 스트랩 클래스와) 관련 HTML 코드입니다 :

 <div class ="col-lg-8"> 
     <div class="form-group"> 
      <label for="inputfirstName" class="col-sm-2 control-label">First Name</label> 
        <div class="col-sm-10"> 
        <input type="text" class="form-control" id="inputfirstName" 
         placeholder="Enter First Name" /> 
        </div> 
     </div> 

다음은 관련 자바 스크립트 코드는 첫 번째 이름 텍스트 상자 필드가 비어 있지 않은지 valdiate하고이 경우 당신이 당신의 입력 유효성을 검사 할 때, 나는 정말 확실하지 않다 사용자 정의 유효성 검사 오류

window.addEventListener('load',init); 
function init() 
{ 
var firstname = document.getElementById("inputfirstName"); 
firstname.addEventListener('onmouseclick',validateFirstname(firstname)); 
} 

function validateFirstname(e){ 
var checker = e.value; 
    if (checker == ""){ 
    e.setCustomValidity("This field must not be blank !"); 

    } 
} 

Answer 1

를 반환해야합니다. 현재 사용자는 텍스트 상자를 클릭하고 그 순간에 유효성 검사를 수행하는 것을 듣고 있습니다.

그러나 e.setCustomValidity를 호출 할 때 유효성 검사 오류 만 추가하기 때문에 양식을 게시 할 때까지 표시되지 않습니다. 이는 setCustomValidity의 의도적 인 동작입니다. 자세한 내용은 여기에서 설명합니다. How to force a html5 form validation without submitting it via jQuery

사용자가 텍스트를 입력 한 후 텍스트 상자의 유효성을 검사하려면 입력 및 변경 이벤트를 사용합니다. 사용자가 텍스트 상자에 무언가를 입력 할 때 입력이 시작되고, 사용자가 텍스트 상자를 떠난 후에 변경됩니다. 해당 필드에 초점을 맞춘 사용자에 관계없이 유효성 검사를 트리거하려면 입력을 "필수"로 설정해야합니다. 그런 다음 HTML5의 표준 필수 메시지 대신 메시지를 표시하려면 이벤트 리스너에 유효하지 않은 이벤트를 추가해야합니다. 이를 수행하는 방법에 대한 전체 코드는 여기에서 더 자세한 답변을 찾을 수 있습니다. Set custom HTML5 required field validation message

<input type="text" class="form-control" id="inputfirstName" 
        placeholder="Enter First Name" required="required"/> 


window.addEventListener('load',init); 
function init() 
{ 
var firstname = document.getElementById("inputfirstName"); 
firstname.addEventListener('input',validateFirstname(firstname)); 
firstname.addEventListener('change',validateFirstname(firstname));+ 
} 

function validateFirstname(e){ 
    var checker = e.value; 
    if (checker == ""){ 
     e.setCustomValidity("This field must not be blank !"); 
    } 
    else{ 
     e.setCustomValidity(""); 
    } 
}