Javascript setCustomValidity引导保留错误弹出窗口

我已经在我的应用程序中实现了本地化，所有这些东西都保存在一个php文件中。因此，我可以轻松做到这一点：

<input class="form-control" type="text" required="" placeholder="username" oninvalid="this.setCustomValidity('<?php echo $this->lang->line('field_required'); ?>')"></input>

---

我发现的一个解决方法是：

onkeyup="this.setCustomValidity('');

该漏洞现在将消失。
在Safari或IE 10以下的某些浏览器中，使用
onvalid
将不起作用。使用自定义事件通知程序附加函数

注意：正如您在中所提到的，您可以从php的
数据无效消息
属性打印消息，并通过
.data（'invalidMessage'）
使用jQuery捕获它

参见工作示例：


var myobj=jQuery（'input.form-control'）；
myobj.on（'keyup keypress blur change input'，function（）{
var messg=（$（this.data（'invalidMessage'））；
if（this.validity.typemissmatch）{
本协议有效期（messg）；
}否则{
本协议有效期（“”）；
}
});

去
TL&DR
检查
element.validity.typeMismatch
，然后检查
element.setCustomValidity（'customerror msg'）
或
element.setCustomValidity（''）
，如果没有不匹配。您应该同时收听
keyup
和
blur
事件

Mozilla开发人员文档中关于
setCustomValidity
的说明：

但是，如果焦点不在我们正在修改的输入框中，那么只使用keyup将无法正常工作

我们前面的示例不会传输输入框的当前状态
如果用户将鼠标移开并单击页面上的其他位置。我们更新
仅当用户按下Enter键时，组件的“值”属性才会显示
焦点在输入框内

让我们通过监听输入框的模糊事件来解决这个问题

以上是来自Angular 2文档：用户输入，段落“关于模糊”

简化示例

下面是Mozilla文档中添加了
blur
keyEvent侦听器的示例。是的，需要重构，但我在Angular 2中的版本看起来大不相同，你的版本也可能如此

<form>
  <label for="mail">I would like you to provide me an e-mail</label>
  <input type="email" id="mail" name="mail">
  <button>Submit</button>
</form>

即使输入文本，我也能看到弹出窗口。@Iceman事实上，这就是问题所在。如果您对另一种方法感兴趣的话<代码>oninvalid

不是跨浏览器gr8。例如，safari不支持它。@Iceman哪种方法？请告诉我，我也找到了解决办法，检查我的答案，但希望看到最好的答案。当然。我将添加一个答案嗯，为什么我看不到文本

请输入有效电子邮件？

这将捕获类似

ctrl+v

或

cmd+v

或

右键单击>粘贴

这样的事件，但按键不起作用。js中有一个命令允许我将弹出窗口显示为：inputId.showCustomValidity（）？

var email = document.getElementById("mail");

email.addEventListener("keyup", function (event) {
  if (email.validity.typeMismatch) {
    email.setCustomValidity("I expect an e-mail, darling!");
  } else {
    email.setCustomValidity("");
  }
});

email.addEventListener("blur", function (event) {
  if (email.validity.typeMismatch) {
    email.setCustomValidity("I expect an e-mail, darling!");
  } else {
    email.setCustomValidity("");
  }
});