OnBlur 유효성 검사에는 순 자바 스크립트에서 두 번 클릭해야 함

비밀번호가 null인지 또는 비어 있는지 또는 onblur를 사용하지 않는지 확인하는 양식이 있습니다. 제출 버튼을 사용하여 양식을 제출합니다. 그러나 작업하기 전에 제출 버튼을 두 번 클릭해야합니다. 암호 상자에 내용이 채워진 후 첫 번째 클릭에는 작동하지 않습니다. 아래는 코드입니다.OnBlur 유효성 검사에는 순 자바 스크립트에서 두 번 클릭해야 함

Jquery와 관련해서는 순수한 자바 스크립트가 필요합니다.

나는 onkeyup을 시도했지만 시스템 및 서버 (아약스 용)에 부담을 줄 수 있으므로 좋은 해결책은 아닙니다.

<!DOCTYPE html> 
<html> 
    <body> 

    <script> 

     var error_user_password = false; 

     function checkpw(){ 

     var user_password = document.forms["joinform"]["user_password"].value; 
     if (user_password == null || user_password == "") { 
      text = "Password : Required"; 
      document.getElementById("errormsg4").innerHTML = text; 
      error_user_password = false; 

     } else { 
      document.getElementById("errormsg4").innerHTML = ""; 
      error_user_password = true; 

     } 
     } 

     function submitall() { 

     checkpw() 
     if(error_user_password == false) { 
      return false; 
     } else { 
      return true 
     } 
     } 
    </script> 

    </body> 
    <form id="joinform" method="post" name="joinform" action="#hello" onsubmit="return submitall()" > 
    <h2>Join</h2> 

    <input type="password" name="user_password" id="user_password" placeholder="Password" onblur="checkpw()" /> 
    <div class ="errormsg" id ="errormsg4"></div><br> 
    <input type="submit" name="join" id="join" value="Submit" ><br><br> 

    </form> 

</html>

출처

2016-08-29 DragonFire

당신은 (submitall에서 checkpw()를 호출 할 수있다)? 따라서 제출하기로 결정하기 직전에 항상 확인됩니다 (흐릿함은 물론). –

다른 validatepassword()를 호출하는 이유는 무엇입니까? 'onblur'과'submit' 폼 모두에 대해 같은 함수를 호출하고 유효성 검사를 true 또는 false로 반환합니다. 또한 입력시 'onblur'보다 'onchange'를 사용하는 것이 좋습니다 (흐림 전 변경이 발생 함). – skobaljic

@skobaljic submitall()에서 호출하는 checkpw()와 같은 여러 함수가 있습니다. 게시 한 코드는 단순성을위한 것입니다. – DragonFire

및 onblur 검증 Onsubmit 버튼이 순수 자바 스크립트
흐림 이벤트가에 onblur 이벤트 핸들러에서 캡처 버튼을 제출 양식에 거품이되지 않기 때문에이 문제가 발생

에서 두 번 클릭 할 필요합니다.

addEventListener
activeElement :
전체 자바 스크립트 솔루션
을 기반으로 제출 버튼이 포커스를 취득하는 경우 blur 이벤트 내부에서 나는 10 밀리 초 후 확인.

내 조각 :

var error_user_password = false; 
 

 
function checkpw(ele, e){ 
 
    var user_password = document.forms["joinform"]["user_password"].value; 
 

 
    if (user_password == null || user_password == "") { 
 
    text = "Password : Required"; 
 
    document.getElementById("errormsg4").innerHTML = text; 
 
    error_user_password = false; 
 
    } else { 
 
    document.getElementById("errormsg4").innerHTML = ""; 
 
    error_user_password = true; 
 
    } 
 
} 
 

 
function submitall(ele, e) { 
 
    checkpw(); 
 

 
    if(error_user_password == false) { 
 
    e.preventDefault(); 
 
    } else { 
 
    console.log('form submitted'); 
 
    } 
 
} 
 

 
window.addEventListener('DOMContentLoaded', function(e) { 
 
    document.getElementById('user_password').addEventListener('blur', function(e) { 
 
    checkpw(this, e); 
 
    setTimeout(function() { 
 
     if (document.activeElement.id == 'join') { 
 
     document.activeElement.click(); 
 
     } 
 
    }, 10); 
 
    }, false); 
 
    document.getElementById('joinform').addEventListener('submit', function(e) { 
 
    submitall(this, e); 
 
    }, false); 
 
});

<form id="joinform" method="post" name="joinform" action="#hello"> 
 
    <h2>Join</h2> 
 

 
    <input type="password" name="user_password" id="user_password" placeholder="Password"/> 
 
    <div class ="errormsg" id ="errormsg4"></div><br> 
 
    <input type="submit" name="join" id="join" value="Submit" ><br><br> 
 

 
</form>

출처

2016-08-29 14:02:30 gaetanoM

더하기 1 (현재 투표 할 평판이 없다) – DragonFire

안녕하세요, 저는 jquery에서 솔루션을 구현하려하지만 작동하지 않습니다. 도와 주실 수 있습니까? 감사합니다.이 링크를 참조하십시오. http : // stackoverflow.com/questions/42707047/jquery-ajax-form-requires-2-clicks-to-submit – DragonFire

OnBlur 유효성 검사에는 순 자바 스크립트에서 두 번 클릭해야 함

답변

관련 문제