HTML5表单必填属性。 设置自定义验证消息？

本文翻译自：HTML5 form required attribute. Set custom validation message?

I've got the following HTML5 form: http://jsfiddle.net/nfgfP/ 我有以下HTML5表单： http : //jsfiddle.net/nfgfP/

 <form id="form" onsubmit="return(login())"> <input name="username" placeholder="Username" required /> <input name="pass" type="password" placeholder="Password" required/> <br/>Remember me: <input type="checkbox" name="remember" value="true" /><br/> <input type="submit" name="submit" value="Log In"/> 

Currently when I hit enter when they're both blank, a popup box appears saying "Please fill out this field". 目前，当我将两个都空白时按Enter键时，会出现一个弹出框，提示“请填写此字段”。 How would I change that default message to "This field cannot be left blank"? 如何将默认消息更改为“此字段不能为空”？

EDIT: Also note that the type password field's error message is simply ***** . 编辑：还请注意，类型密码字段的错误消息只是***** 。 To recreate this give the username a value and hit submit. 要重新创建此名称，请为用户名指定一个值，然后单击“提交”。

EDIT : I'm using Chrome 10 for testing. 编辑 ：我正在使用Chrome 10进行测试。 Please do the same 请同样

#1楼

参考：https://stackoom.com/question/m7Bf/HTML-表单必填属性-设置自定义验证消息

#2楼

It's very simple to control custom messages with the help of the HTML5 oninvalid event 在HTML5 oninvalid事件的帮助下控制自定义消息非常简单

Here is the code: 这是代码：

User ID 
<input id="UserID"  type="text" required 
       oninvalid="this.setCustomValidity('User ID is a must')">

#3楼

It's very simple to control custom messages with the help of HTML5 event oninvalid 在HTML5事件oninvalid的帮助下控制自定义消息非常简单

Here is code: 这是代码：

<input id="UserID"  type="text" required="required"
       oninvalid="this.setCustomValidity('Witinnovation')"
       onvalid="this.setCustomValidity('')">

This is most important: 这是最重要的：

onvalid="this.setCustomValidity('')"

#4楼

The easiest and cleanest way I've found is to use a data attribute to store your custom error. 我发现的最简单，最干净的方法是使用数据属性存储您的自定义错误。 Test the node for validity and handle the error by using some custom html. 测试节点的有效性，并使用一些自定义html处理错误。

le javascript javascript

if(node.validity.patternMismatch)
        {
            message = node.dataset.patternError;
        }

and some super HTML5 和一些超级HTML5

<input type="text" id="city" name="city" data-pattern-error="Please use only letters for your city." pattern="[A-z ']*" required>

#5楼

Here is the code to handle Custom Error Message in HTML5 这是处理HTML5中的自定义错误消息的代码

<input type="text" id="username" required placeholder="Enter Name"
    oninvalid="this.setCustomValidity('Enter User Name Here')"
    oninput="this.setCustomValidity('')"  />

This part is important because it hides the error message when the user inputs new data: 这部分很重要，因为它在用户输入新数据时隐藏了错误消息：

oninput="this.setCustomValidity('')"

#6楼

Try this one, its better and tested: 试试这个，它更好并经过测试：

HTML: HTML：

<form id="myform">
    <input id="email" 
           oninvalid="InvalidMsg(this);" 
           oninput="InvalidMsg(this);"
           name="email"  
           type="email" 
           required="required" />
    <input type="submit" />
</form>

JAVASCRIPT: JAVASCRIPT：

function InvalidMsg(textbox) {
    if (textbox.value === '') {
        textbox.setCustomValidity('Required email address');
    } else if (textbox.validity.typeMismatch){
        textbox.setCustomValidity('please enter a valid email address');
    } else {
       textbox.setCustomValidity('');
    }

    return true;
}

Demo: 演示：

http://jsfiddle.net/patelriki13/Sqq8e/ http://jsfiddle.net/patelriki13/Sqq8e/