뒤로 버튼을 클릭 할 때 HTML5 양식 유효성 검사 오류를 재설정하는 방법

Question

입력 주위에 HTML5의 유효하지 않은 빨간색 테두리를 지우는 데 문제가 있습니다. 사용자가 양식을 올바르게 입력하지 않고 제출 버튼을 클릭하면 HTML5 setCustomValidity 오류가 표시되고 공백으로 남겨진 모든 필수 입력란 주변에 기본 빨간색 외곽선이 표시됩니다.이 모든 것이 효과적입니다. 문제는 사용자가 뒤로 버튼을 클릭 한 다음이 양식이나이 양식 내의 양식의 다른 섹션으로 돌아 오면 양식에 빨간색 테두리가있는 잘못된 양식 요소가 계속 표시된다는 것입니다.

"되돌아 가기"버튼을 클릭하면 양식이 재설정/지워져 모든 양식 요소가 재설정되고 양식이 다시 표시되지 않는 한 빨간색 윤곽선이 표시되지 않습니다. 제출되었으며 빈/부정확 한 양식 정보가 있습니다.

<form class="login-form" aria-label="Login" action="" method="post"> 
    <div class="login-A"> 
    <h4>Are you a client?</h4> 
    <div> 
     <button class="lx-button lx-button--small lx-button--primary" id="client-yes" type=button> 
     Yes 
     </button> 
     <button class="lx-button lx-button--small lx-button--primary" id="client-no" type=button> 
     No 
     </button> 
    </div> 
    </div> 
    <div class="login-B"> 
     <h4>Existing client information</h4> 
     <button class="lx-button lx-button--small lx-button--tertiary back" id="olb-back-btn-2" type=button> 
     Go back 
     </button> 
     <p>Enter your online ID and Password</p> 
     <div> 
     <div> 
      <label for="olb-user-id">User ID</label> 
      <input id="olb-user-id" name="olbuserid" maxlength="20" type="text" required="required" oninvalid="setCustomValidity('User ID is required.')" oninput="setCustomValidity('')"> 
     </div> 
     <div> 
      <label for="olb-password">Password</label> 
      <input id="olb-password" name="olbpassword" maxlength="28" value="" type="password" required="required" oninvalid="setCustomValidity('Password is required.')" oninput="setCustomValidity('')"> 
     </div> 
     </div> 
     <button class="lx-button lx-button--small lx-button--primary" id="login-button" type=submit> 
     Continue 
     </button> 
    </div><!-- login-B --> 
    <div class="login-C"> 
     <h4 class="text">New client</h4> 
     <button class="lx-button lx-button--small lx-button--tertiary back" id="olb-back-btn-3" type=button> 
      Go back 
     </button> 
     <label for="login-state">Select your state to view your account options.</label> 
     <div class="login-state-container"> 
      <select id="login-state" name="login-state" required="required" oninvalid="setCustomValidity('State is required.')" oninput="setCustomValidity('')"> 
       <option value="" selected="selected">State</option> 
       <option value="AL">AL</option> 
       <option value="FL">FL</option> 
       <option value="GA">GA</option> 
       <option value="IN">IN</option> 
       <option value="WV">WV</option> 
       <option value="DC">Washington, DC</option> 
      </select> 
     </div> 
    </div> 
</form> 

필자는이 문제를 해결하는 방법을 알아 내려고 일 동안 검색 : 여기

내 코드의 조각이다. 나는 시도했다 : 또한 시도

function clearValidity(){ 
    document.getElementById('olb-user-id').setCustomValidity(''); 
    document.getElementById('olb-password').setCustomValidity(''); 
    document.getElementById('login-state').setCustomValidity(''); 
} 

document.getElementById('olb-back-btn-2').onclick = function() {clearValidity()}; 
document.getElementById('olb-back-btn-3').onclick = function() {clearValidity()}; 

을 :

$('.login-form').trigger("reset"); 

게시물에서 많은 시련과 함께 내가 읽은하지만 아무것도 작동하는 것 같다 없습니다. 도와주세요! 고맙습니다!

Answer 1

뒤로 버튼은 마지막 페이지가 끝난 방법을 저장합니다. 이렇게하는 유일한 방법은 양식을 변경하여 자바 스크립트를 사용하여 데이터를 게시하는 것입니다. 데이터를 수집하고 HttpXML 자바 스크립트

사용은

1. 먼저 자바 스크립트
2. 게시 자바 스크립트 HttpXML 요청
3. 를 사용하여 데이터를 사용하여 자바 스크립트
4. 그리고 분명 모든 필드의 데이터를 수집 게시하려면 반환시 (xml repsonse) 양식을 다시 작성하기 위해 필요한 경우 리디렉션하거나 오류를 표시합니다 (양식이 비어 있고 다시 시작할 준비가 됨)

이 방법을 사용하는 경우 사용자가 여러 번 제출하는 것을 중지하기 위해 XML 포스트에서 응답이 반환 될 때까지 제출 버튼을 비활성화해야합니다.