如何重置HTML5表单验证错误，当点击返回按钮

我有一个问题清除HTML5 oninvalid输入边界无效。如果用户在未正确填写表单的情况下单击提交按钮，将显示HTML5 setCustomValidity错误，并且默认的红色轮廓将显示在任何空白的所需输入字段周围......这一切都很好。问题是，如果用户单击后退按钮，然后返回到此窗体或此窗体中窗体的其他部分，窗体仍将显示所有带有红色轮廓的无效窗体元素。如何重置HTML5表单验证错误，当点击返回按钮

我想要发生的事情是，如果这种形式的“返回”按钮被单击，将重置/清除窗体，以便所有窗体元素都被重置，并且除非窗体再次被重置，否则任何窗体元素都不会显示红色轮廓提交并且有空/不正确的表单信息。

这里是我的代码片段：

<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");

随着从帖子很多其他试验我读，但似乎没有任何工作。请帮忙！谢谢！

来源

2017-09-26 moudstar

后退按钮是最后一页如何结束的保存。做到这一点的唯一方法是更改表单以使用Javascript发布数据。

使用JavaScript收集数据和HttpXML发布使用JavaScript

后使用javascript一个HttpXML要求

数据也

首先收集数据用JavaScript
然后清除所有字段返回时（xml repsonse）如果需要重定向或显示错误以便他们重新填写表单（表单现在将空白并准备好再次开始）

如果使用这种方法，一定要禁用提交按钮，直到从XML帖子返回的响应停止用户多次提交

来源

2017-09-26 14:25:17

当我说“后退按钮”它不是浏览器后退按钮，但在我的表单中的后退按钮。我没有保存表单信息，也不想单击表单后退按钮。 – moudstar

如果您的表单上有一个后退按钮，只需使用onclick，然后使用document.getElementById（'test'）。value =“”;这将清除准备好重新使用的表单 –

这不适用于重置所需的HTML5本机表单域。它不会重置无效或无效的字段上的无效红色边框 – moudstar

如何重置HTML5表单验证错误，当点击返回按钮

回答

相关问题