Firefox在多次单击后不显示表单的错误消息
Firefox在多次单击后不显示表单的错误消息
提问于 2021-09-07 15:51:48
如果用户在输入元素或提交按钮上单击多次(似乎是3次)，Firefox就会停止显示表单的默认约束违反消息。例如，以下输入字段被标记为必填:如果我将其保留为空并单击提交按钮一次，firefox将正确显示错误消息。如果我再单击按钮或输入字段两次，firefox将停止显示消息，并开始只关注导致有效性检查失败的字段。另一个问题是，在重新加载页面之前，浏览器不会再显示错误消息。我试过Firefox91.0.2和92.0 (刚刚下载的最新版本)。
我想要的行为是Chrome、IE和Safari的行为之一:如果我点击按钮，有效性检查失败，那么无论我点击多少次，都会显示错误消息。有没有办法在FF中强制执行此行为？
Ps:提交按钮实际上是按钮类型，而不是提交类型。我需要它是一个按钮，但我也尝试了type=submit，但行为没有改变。
function mySubmit(formId){
let form = document.getElementById(formId);
if(form.reportValidity()) {
window.alert("submit");
form.reset();
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="myForm">
<input type="text" required name="name" autocomplete="off">
<button onclick="mySubmit('myForm')" type="button" class="submitButton" lang="en">Submit</button>
</form>
</body>
</html>
回答 1
Stack Overflow用户
发布于 2021-09-07 18:01:52
你的代码看起来有点复杂。如果你必须在提交表单时执行一些JS代码，我会推荐一个类似这样的事件侦听器：
document.forms.myForm.addEventListener('submit', e => {
alert('submit');
e.target.reset();
});<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="myForm">
<input type="text" required name="name" autocomplete="off">
<button class="submitButton" lang="en">Submit</button>
</form>
</body>
</html>
如果您需要停止提交操作和/或侦听input元素上的无效事件(并向用户显示您自己的消息)。
document.forms.myForm.addEventListener('submit', e => {
e.preventDefault();
alert('submit');
e.target.reset();
});
document.forms.myForm.name.addEventListener('invalid', e => {
e.preventDefault();
alert('invalid');
});<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="myForm">
<input type="text" required name="name" autocomplete="off">
<button class="submitButton" lang="en">Submit</button>
</form>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69091263
复制相关文章
相似问题
腾讯云开发者
