Html 如何在bootstrap中的form-control的popover中更改必填字段的默认消息?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/24391078/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 02:08:19  来源:igfitidea点击:

How to change the default message of the required field in the popover of form-control in bootstrap?

htmlcsstwitter-bootstrap

提问by dpndra

 <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 valid 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>

how can we change this default message of popover of the require field "Please fill out this field "to "please enter username"

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

回答by Mritunjay

You can use setCustomValidityfunction when oninvalidevent occurs.

您可以setCustomValidityoninvalid事件发生时使用函数。

Like below:-

如下图:-

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

Update:-

更新:-

To clear the message once you start entering use oninput="setCustomValidity('')attribute to clear the message.

一旦开始输入使用oninput="setCustomValidity('')属性来清除消息,就可以清除消息。

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

回答by Sairam Kukadala

Combination of Mritunjay and Bartu's answers are full answer to this question. I copying the full example.

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

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

Here,

这里,

this.setCustomValidity('Please Enter valid email')"- Display the custom message on invalidated of the field

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

oninput="setCustomValidity('')"- Remove the invalidate message on validated filed.

oninput="setCustomValidity('')"- 在已验证的文件中删除无效消息。

回答by Stepan Tripal

And for all input and select:

对于所有输入和选择:

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

回答by APH

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

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

this work if you move to previous or next field by mouse, but by enter key, this is not work !!!

如果您通过鼠标移动到上一个或下一个字段,但按 Enter 键,这不起作用!