相关疑难解决方法(0)

比如我有一个textfield.该字段是必填字段,仅需要数字且值的长度必须为10.当我尝试提交长度为5的值的表单时,将显示默认错误消息:Please match the requested format

<input type="text" required="" pattern="[0-9]{10}" value="">

1. 如何更改HTML 5表单验证错误的默认消息？
2. 如果第一点可以完成,那么有没有办法创建一些属性文件并在该文件中设置自定义错误消息？

这个小的HTML5密码字段完美地工作,没有oninvalid属性(模式说:最少6个字符):

<form>
    <input type="password" name="user_password_new" pattern=".{6,}" required />      
    <input type="submit"  name="register" value="Register" />
</form>

在这里查看jsFiddle .

但是当我添加一个oninvalid属性,当用户的输入不符合模式时会发出自定义错误消息,整个字段永远不会变为有效,请参阅此处的代码:

<form>
    <input type="password" name="user_password_new" pattern=".{6,}" oninvalid="setCustomValidity('Minimum length is 6 characters')" required />      
    <input type="submit"  name="register" value="Register" />
</form>

在这里查看jsFiddle .

你能发现错误吗？

我有以下内容:

<input required pattern=".{6,}" class="big medium-margin" name="Password" placeholder="Password" size="25" type="password" />

当我只输入一个字符时,我收到一条消息说:

"Please match the requested format"

有没有办法我可以自定义此消息,说"请输入至少5个字符"

我有一个多选复选框，向其中添加了一个JS以确保访问者选择至少一个选项

<div class="form-group options">
<label class="control-label col-md-4" for="optiontext">Specify an option</label>
<div class="col-md-6">
    <input type="checkbox" name="option[]" value="option1" required/> Option 1<br>
    <input type="checkbox" name="option[]" value="option2" required/> Option 2<br>
    <input type="checkbox" name="option[]" value="option3" required/> Option 3<br>
    <input type="checkbox" name="option[]" value="option4" required/> Option 4<br>
    <input type="checkbox" name="option[]" value="option5" required/> Option 5<br>
    <input type="checkbox" name="option[]" value="option6" required/> Option 6<br>
    <input type="checkbox" name="option[]" value="option7" required/>  Option 7
</div>

那就是JS

$(function(){
var requiredCheckboxes = $('.options :checkbox[required]');
requiredCheckboxes.change(function(){
    if(requiredCheckboxes.is(':checked')) {
        requiredCheckboxes.removeAttr('required');
    } else {
        requiredCheckboxes.attr('required', 'required');
    }
}); …