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

我得到了以下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"/>

目前，当我点击enter时，它们都是空白的，弹出框显示“请填写此字段”。如何将默认消息更改为“此字段不能留空”?

还要注意，type password字段的错误消息就是*****。为了重新创建这个，给用户名一个值并点击submit。

编辑:我使用Chrome 10进行测试。请也这样做

768909 次浏览
小开
最佳答案

使用setCustomValidity:

document.addEventListener("DOMContentLoaded", function() {
var elements = document.getElementsByTagName("INPUT");
for (var i = 0; i < elements.length; i++) {
elements[i].oninvalid = function(e) {
e.target.setCustomValidity("");
if (!e.target.validity.valid) {
e.target.setCustomValidity("This field cannot be left blank");
}
};
elements[i].oninput = function(e) {
e.target.setCustomValidity("");
};
}
})

我改为纯JavaScript从Mootools的建议@itpastorn在评论中，但你应该能够工作出Mootools等效的，如有必要。

编辑

我在这里更新了代码，因为setCustomValidity的工作方式与我最初回答时的理解略有不同。如果setCustomValidity被设置为空字符串以外的任何值，则会导致该字段被认为无效;因此，您必须在测试有效性之前清除它，您不能只是设置它然后忘记。

进一步的编辑

正如下面@thomasvdb的评论中指出的那样，你需要在invalid之外的一些事件中清除自定义有效性，否则可能会通过oninvalid处理程序来清除它。

小开

注意:这不再工作在Chrome，没有测试在其他浏览器。见下面的编辑。这个答案留作历史参考。

如果您觉得验证字符串真的不应该由代码设置，您可以将输入元素的title属性设置为“此字段不能留空”。(适用于Chrome 10)

title="This field should not be left blank."

看到http://jsfiddle.net/kaleb/nfgfP/8/

在Firefox中，你可以添加这个属性:

x-moz-errormessage="This field should not be left blank."

编辑

自从我最初写下这个答案以来，这似乎已经改变了。现在添加标题并不会改变有效性消息，它只是向消息添加了一个附录。上述说法仍然适用。

编辑2

Chrome现在不做任何与标题属性的Chrome 51。我不确定这在哪个版本中发生了变化。

小开

我做了一个小库来简化错误消息的更改和翻译。你甚至可以改变文本的错误类型，目前不可用Chrome中的title或Firefox中的x-moz-errormessage。去去GitHub上看看吧，并给出反馈。

它的用法如下:

<input type="email" required data-errormessage-value-missing="Please input something">

有一个演示可在jsFiddle。

小开

在HTML5 oninvalid事件的帮助下控制自定义消息非常简单

代码如下:

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

在HTML5事件oninvalid的帮助下控制自定义消息非常简单

下面是代码:

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

这是最重要的:

onvalid="this.setCustomValidity('')"
小开

我发现的最简单、最干净的方法是使用数据属性来存储自定义错误。测试节点的有效性，并使用一些自定义html处理错误。enter image description here

le javascript

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

以及一些超级HTML5

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

下面是在HTML5中处理自定义错误消息的代码:

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

这部分很重要，因为它隐藏了用户输入新数据时的错误消息:

oninput="this.setCustomValidity('')"
小开

试试这个，它更好，而且经过测试:

    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;
}
<form id="myform">
<input id="email"
oninvalid="InvalidMsg(this);"
oninput="InvalidMsg(this);"
name="email"
type="email"
required="required" />
<input type="submit" />
</form>

演示:

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

小开

通过在正确的时间设置和取消设置setCustomValidity，验证消息将完美地工作。

<input name="Username" required
oninvalid="this.setCustomValidity('Username cannot be empty.')"
onchange="this.setCustomValidity('')" type="text" />

我使用了onchange而不是oninput，后者更通用，当值在任何情况下发生变化时，即使是通过JavaScript。

小开

我有一个更简单的香草js唯一的解决方案:

复选框:

document.getElementById("id").oninvalid = function () {
this.setCustomValidity(this.checked ? '' : 'My message');
};

输入:

document.getElementById("id").oninvalid = function () {
this.setCustomValidity(this.value ? '' : 'My message');
};
小开

适应撒拉族的回答JSX和React，我注意到React选择不像<input/>字段有关验证的行为。显然，需要一些变通方法来只显示自定义消息，并避免在不方便的时候显示它。

我已经提出了一个问题在这里，如果它有任何帮助。在这里是一个带有工作示例的CodeSandbox，这里再现了其中最重要的代码:

Hello.js

import React, { Component } from "react";
import SelectValid from "./SelectValid";


export default class Hello extends Component {
render() {
return (
<form>
<SelectValid placeholder="this one is optional" />
<SelectValid placeholder="this one is required" required />
<input
required
defaultValue="foo"
onChange={e => e.target.setCustomValidity("")}
onInvalid={e => e.target.setCustomValidity("foo")}
/>
<button>button</button>
</form>
);
}
}

SelectValid.js

import React, { Component } from "react";
import Select from "react-select";
import "react-select/dist/react-select.css";


export default class SelectValid extends Component {
render() {
this.required = !this.props.required
? false
: this.state && this.state.value ? false : true;
let inputProps = undefined;
let onInputChange = undefined;
if (this.props.required) {
inputProps = {
onInvalid: e => e.target.setCustomValidity(this.required ? "foo" : "")
};
onInputChange = value => {
this.selectComponent.input.input.setCustomValidity(
value
? ""
: this.required
? "foo"
: this.selectComponent.props.value ? "" : "foo"
);
return value;
};
}
return (
<Select
onChange={value => {
this.required = !this.props.required ? false : value ? false : true;
let state = this && this.state ? this.state : { value: null };
state.value = value;
this.setState(state);
if (this.props.onChange) {
this.props.onChange();
}
}}
value={this && this.state ? this.state.value : null}
options={[{ label: "yes", value: 1 }, { label: "no", value: 0 }]}
placeholder={this.props.placeholder}
required={this.required}
clearable
searchable
inputProps={inputProps}
ref={input => (this.selectComponent = input)}
onInputChange={onInputChange}
/>
);
}
}
小开

好吧，oninvalid工作得很好，但它显示错误，即使用户输入有效的数据。所以我用下面的方法来解决这个问题，希望它对你也有用，

oninvalid="this.setCustomValidity('Your custom message.')" onkeyup="setCustomValidity('')"

小开

解决方案防止谷歌Chrome错误消息输入每个符号:

<p>Click the 'Submit' button with empty input field and you will see the custom error message. Then put "-" sign in the same input field.</p>
<form method="post" action="#">
<label for="text_number_1">Here you will see browser's error validation message on input:</label><br>
<input id="test_number_1" type="number" min="0" required="true"
oninput="this.setCustomValidity('')"
oninvalid="this.setCustomValidity('This is my custom message.')"/>
<input type="submit"/>
</form>


<form method="post" action="#">
<p></p>
<label for="text_number_1">Here you will see no error messages on input:</label><br>
<input id="test_number_2" type="number" min="0" required="true"
oninput="(function(e){e.setCustomValidity(''); return !e.validity.valid && e.setCustomValidity(' ')})(this)"
oninvalid="this.setCustomValidity('This is my custom message.')"/>
<input type="submit"/>
</form>

小开

可以通过在字段中添加'title'来轻松处理:

<input type="text" id="username" required title="This field can not be empty"  />
小开

如果您的错误消息是单一的，那么请尝试下面的操作。

<input oninvalid="this.setCustomValidity('my error message')"
oninput="this.setCustomValidity('')">  <!-- 👈 don't forget it. -->

要处理多个错误，请尝试下面的操作

<input oninput="this.setCustomValidity('')">
<script>
inputElem.addEventListener("invalid", ()=>{
if (inputElem.validity.patternMismatch) {
return inputElem.setCustomValidity('my error message')
}
return inputElem.setCustomValidity('') // default message
})
</script>

例子

您可以测试valueMissing和valueMissing。

<form>
<input pattern="[^\\/:\x22*?<>|]+"
placeholder="input file name"
oninput="this.setCustomValidity('')"
required
>
<input type="submit">
</form>


<script>
const form = document.querySelector("form")


const inputElem = document.querySelector(`input`)


inputElem.addEventListener("invalid", ()=>{
if (inputElem.validity.patternMismatch) {
return inputElem.setCustomValidity('Illegal Filename Characters \\/:\x22?<>|')
}
return inputElem.setCustomValidity('') // return default message according inputElem.validity.{badInput, customError, tooLong, valueMissing ...}
})


form.onsubmit = () => {
return false
}
</script>

小开 
const username= document.querySelector('#username');
const submit=document.querySelector('#submit');


submit.addEventListener('click',()=>{
if(username.validity.typeMismatch){
username.setCustomValidity('Please enter User Name');
}else{
username.setCustomValidity('');
}
if(pass.validity.typeMismatch){
pass.setCustomValidity('Please enter Password');
}else{
pass.setCustomValidity('');
}

}）

小开

对于一个完整的自定义检查逻辑:

$(document).ready(function() {


$('#form').on('submit', function(e) {
if ($('#customCheck').val() != 'apple') {
$('#customCheck')[0].setCustomValidity('Custom error here! "apple" is the magic word');
$('#customCheck')[0].reportValidity();
e.preventDefault();
}
});


$('#customCheck').on('input', function() {
$('#customCheck')[0].setCustomValidity('');
});




});
input {
display: block;
margin-top: 15px;
}


input[type="text"] {
min-width: 250px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<form id="form">
<input type="text" placeholder="dafault check with 'required' TAG" required/>
<input type="text" placeholder="custom check for word 'apple'" id="customCheck" />
<input type="submit">
</form>


提交答案