javascript - 当我想仅显示一个输入字段的错误气泡时,如何正确使用 reportValidity()?

标签 javascript html

我想在给定表单上的数十个输入字段中的一个上验证并显示错误气泡。 每个输入字段都有自己的必需属性和模式属性集,以及验证 onBlur 上输入的函数。

为此,我在 onBlur 上调用一个函数来进行验证,使用 setCustomValidity() 设置自定义错误消息,然后调用 reportValidity() 在表单元素上显示气泡上的自定义消息...这验证了我的第一个字段,但是当我 onBlur 第一个字段并且它有效时,下一个输入字段显示错误气泡。

我知道我的问题是 reportValidity() 验证整个表单,并且空的必填字段确实无效...但是我如何强制它仅在我的字段上显示错误气泡要走了吗?我很难弄清楚这一点。

需要澄清的是,这就是我所说的错误气泡。我不知道它的技术名称(我想知道它!)

to

最佳答案

而不是在 HTMLFormElement 上调用 reportValidity() ,您可以对每个 HTMLInputElement 调用 reportValidity() .

下面的示例显示了两个必需的 HTMLInputElement,第二个已验证。

document.getElementById("2")
  .reportValidity();
<form>
  <input id="1" required>
  <input id="2" required>
</form>

关于javascript - 当我想仅显示一个输入字段的错误气泡时,如何正确使用 reportValidity()?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53728335/

相关文章:

javascript - 存储 jQuery 插件初始化设置以供后续初始化?

C# BHO 从 Javascript 返回值

javascript - 动态创建 bootstrap 4 张卡片显示为一列而不是正常布局(行)

javascript - autofocus 属性在 Firefox 中显示状态更改时不起作用

javascript - 如何在使用 Javascript 刷新页面时保留对类所做的更改

javascript - 无法使用 Javascript 变量

html - 基于 Flexbox 的站点水平溢出内容

javascript - 我有 n 个列表项。我不需要得到任何具有事件类的项目

javascript - Bootstrap 3 菜单,一个可以切换选项卡并打开下拉菜单的按钮?

html - 更改 div :before on mouse over another div is not working 的内容