如何重置HTML5表單驗證錯誤，當點擊返回按鈕

Question

我有一個問題清除HTML5 oninvalid輸入邊界無效。如果用戶在未正確填寫表單的情況下單擊提交按鈕，將顯示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

後退按鈕是最後一頁如何結束的保存。做到這一點的唯一方法是更改​​表單以使用Javascript發佈數據。

使用JavaScript收集數據和HttpXML發佈使用JavaScript

後使用javascript一個HttpXML要求

數據也

1. 首先收集數據用JavaScript
2. 然後清除所有字段返回時（xml repsonse）如果需要重定向或顯示錯誤以便他們重新填寫表單（表單現在將空白並準備好再次開始）

如果使用這種方法，一定要禁用提交按鈕，直到從XML帖子返回的響應停止用戶多次提交