jQuery .show() 호출에서 HTML5 양식 유효성 검사 오류가 발생합니다.

Question

여러 페이지 HTML5 양식을 생성 중입니다. 양식의 각 "페이지"는 해당 BUTTON 요소를 클릭하면 jQuery .hide() 또는 .show() 호출에 의해 숨겨 지거나 표시되는 DIV에 있습니다.

문제는 다음 페이지를 표시 할 때 유효성 검사가 자동으로 호출 된 것처럼 보이고 사용자가 아무 것도 할 수 없기 전에 오류 메시지가 필요한 필드에 즉시 팝업된다는 것입니다. 무언가가 실수로 양식 유효성 검사 호출을 실행합니까?

간단한 예 : 숨어있는 페이지 1 페이지 중 2시

<div class="page" id="page_1" style="display:block;"> 
    <input type="text" name="first_name" required> 
    <button onclick="$('#page_1').hide(); $('#page_2').show();">Next</button> 
</div> 

<div class="page" id="page_2" style="display:none;"> 
    <input type="text" name="last_name" required> 
</div> 

, 유효성 검사 오류가 2 페이지 즉시의 첫 번째 필수 필드에 나타납니다. 어떤 아이디어?

Answer 1

모든 입력 태그에 checkValidity 함수를 넣습니다. 나는 그것을 최근에했다.

   function nextDiv(){ 
       var a = document.getElementById('ONE').checkValidity(); 
       var b = document.getElementById('TWO').checkValidity(); 
       var c = document.getElementById('THREE').checkValidity(); 
       var d = document.getElementById('FOUR').checkValidity(); 
       var e = document.getElementById('FIVE').checkValidity(); 
       var f = document.getElementById('SIX').checkValidity(); 
       var g = document.getElementById('SIX').value; 
       er = document.getElementById("ERROR"); 
       var email = document.getElementById('ONE').value; 
       var ec = checkEmail(email); 
       var cp = checkPassword(); 
       if(a == 1 && b == 1 && c == 1 && d == 1 && e == 1 && f == 1 && g!=0 && ec == 'true' && cp ==1){ 
        $("#div_1").slideLeftHide(); 
        $("#div_2").delay(1100).slideRightShow(); 
        er.style.visibility = "hidden"; 
       }else{ 
        er.style.visibility = "visible"; 
       } 
      } 

이렇게하면 부울 값을 반환하고 다른 경우 javascript를 사용하여 확인합니다. 유효성 검사 팝업창은 보이지 않지만 필요한 태그와 패턴을 넣을 수 있습니다. 사용자보다 오류가 표시됩니다.