如何更改引导程序中表单控件弹出窗口中必填字段的默认消息？答案

【问题标题】：How to change the default message of the required field in the popover of form-control in bootstrap?如何更改引导程序中表单控件弹出窗口中必填字段的默认消息？
【发布时间】：2014-08-14 23:28:26
【问题描述】：

 <form class="form-asd" role="form">
    <h2 class="form-signin-heading">login</h2><hr />
    <label class="control-label"  for="username">Username</label>
    <input class="form-control" type="email"  required="" placeholder="username"data-error="enter username"></input>
    <label class="control-label"  for="username">password</label>
    <input class="form-control" type="password"  required=" " placeholder="Password"></input>
    <label class="checkbox"></label>
    <button class="btn btn-lg btn-primary " type="submit">submit</button>
</form>

我们如何将要求字段“请填写此字段”的弹出框的默认消息更改为“请输入用户名”

【问题讨论】：

This codepen 正是这样做的。
另见changing the language of error message in required field in html5 contact form，几乎相同的问题，唯一真正的区别是这个问题提到了引导程序。

标签： html css twitter-bootstrap

【解决方案1】：

当oninvalid事件发生时，您可以使用setCustomValidity函数。

如下：-

<input class="form-control" type="email" required="" 
    placeholder="username" oninvalid="this.setCustomValidity('Please Enter valid email')">
</input>

更新：-

要在开始输入后清除消息，请使用oninput="setCustomValidity('') 属性清除消息。

<input class="form-control" type="email"  required="" placeholder="username"
 oninvalid="this.setCustomValidity('Please Enter valid email')"
 oninput="setCustomValidity('')"></input>

【讨论】：

最佳解释：html5rocks.com/en/tutorials/forms/constraintvalidation
添加此代码后，我会显示我的消息，但是在输入中输入一些文本后，我仍然会显示此消息，直到我刷新。
为了使用这个方法，你需要在输入后清除customValidity消息，否则即使它有效，它也会一直显示该错误消息。 oninput="setCustomValidity('')" 与 oninvalid 一起使用时修复了此问题。
有没有办法区分用户留空字段和用户输入无效电子邮件？我可以同时编辑所需的错误消息和无效的电子邮件错误消息吗？
可以对所有输入进行此操作，而不仅仅是在某些页面中吗？

【解决方案2】：

Mritunjay 和 Bartu 的答案组合是这个问题的完整答案。我复制了完整的例子。

<input class="form-control" type="email"  required="" placeholder="username"
 oninvalid="this.setCustomValidity('Please Enter valid email')"
 oninput="setCustomValidity('')"></input>

这里，

this.setCustomValidity('请输入有效的电子邮件')" - 在字段无效时显示自定义消息

oninput="setCustomValidity('')" - 删除验证字段上的无效消息。

【讨论】：

【解决方案3】：

对于所有输入和选择：

$("input[required], select[required]").attr("oninvalid", "this.setCustomValidity('Required!')");
$("input[required], select[required]").attr("oninput", "setCustomValidity('')");

【讨论】：

【解决方案4】：

$("input[required]").attr("oninvalid", "this.setCustomValidity('Say Somthing!')");

如果您通过鼠标移动到上一个或下一个字段，但按回车键，这不起作用！！！

【讨论】：