如何重置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");
随着从帖子很多其他试验我读,但似乎没有任何工作。请帮忙!谢谢!
答
后使用javascript一个HttpXML要求
数据也
后退按钮是最后一页如何结束的保存。做到这一点的唯一方法是更改表单以使用Javascript发布数据。
使用JavaScript收集数据和HttpXML发布使用JavaScript
- 首先收集数据用JavaScript
- 然后清除所有字段返回时(xml repsonse)如果需要重定向或显示错误以便他们重新填写表单(表单现在将空白并准备好再次开始)
如果使用这种方法,一定要禁用提交按钮,直到从XML帖子返回的响应停止用户多次提交
当我说“后退按钮”它不是浏览器后退按钮,但在我的表单中的后退按钮。我没有保存表单信息,也不想单击表单后退按钮。 – moudstar
如果您的表单上有一个后退按钮,只需使用onclick,然后使用document.getElementById('test')。value =“”;这将清除准备好重新使用的表单 –
这不适用于重置所需的HTML5本机表单域。它不会重置无效或无效的字段上的无效红色边框 – moudstar