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


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

我们该如何更改require字段“请填写此字段”以“请输入用户名”的默认弹出消息


该Codepen正是这样做的。
zelusp

另请参见在html5联络表中的必填字段中更改错误消息的语言,几乎是相同的问题,唯一真正的区别是该问题提到了引导程序。
faintsignal

Answers:


195

事件发生setCustomValidity时可以使用功能oninvalid

如下所示:

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

更新:-

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

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


17
添加此代码后,我得到了显示的消息,但是在输入中输入了一些文本之后,直到刷新之前,我仍然显示此消息。
佩拉

11
为了使用此方法,您需要在输入后清除customValidity消息,否则即使错误消息仍然有效,它也会继续显示该错误消息。当与oninvalid一起使用时,oninput =“ setCustomValidity('')”可解决此问题。
巴图

1
有什么方法可以区分用户将字段保留为空和用户输入无效的电子邮件吗?我可以同时编辑必需的错误消息和无效的电子邮件错误消息吗?
ariebear

不仅可以在某些页面上对所有输入执行此操作吗?
Youssef Boudaya,

22

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(”)“ -删除经过验证的字段上的无效消息。


6

对于所有输入,然后选择:

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

-2

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

如果您通过鼠标移至上一个或下一个字段,但按Enter键,则此功能无效!

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.