У меня есть следующая форма 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"/>Используйте 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("");
};
}
})
I изменен на ванильный JavaScript из Mootools, как предлагается @itpastorn в комментарии, но при необходимости вы сможете при необходимости выработать эквивалент Mootools.
Я обновил код здесь, так как setCustomValidity работает несколько иначе, чем я понял, когда я изначально ответил. Если для параметра setCustomValidity установлено значение, отличное от пустой, это приведет к тому, что поле будет считаться недействительным; поэтому вы должны очистить его до проверки действительности, вы не можете просто установить его и забыть.
Как указано в комментарии @thomasvdb ниже, вам нужно очистить пользовательскую достоверность в некотором событии вне invalid, иначе может быть дополнительный проход через обработчик oninvalid, чтобы его очистить.
Вот код для обработки пользовательских сообщений об ошибках в HTML5
<input type="text" id="username" required placeholder="Enter Name"
oninvalid="this.setCustomValidity('Enter User Name Here')"
oninput="this.setCustomValidity('')" />
Эта часть важна, потому что она скрывает сообщение об ошибке, когда пользователь вводит новые данные:
oninput="this.setCustomValidity('')"
Управлять пользовательскими сообщениями очень просто с помощью события HTML5 oninvalid
Вот код:
<input id="UserID" type="text" required="required"
oninvalid="this.setCustomValidity('Witinnovation')"
onvalid="this.setCustomValidity('')">
Это самое главное:
onvalid="this.setCustomValidity('')"
Примечание. Это больше не работает в Chrome и не тестируется в других браузерах. Смотрите правки ниже. Этот ответ оставлен здесь для исторической справки.
Если вы чувствуете, что строка проверки на самом деле не должна быть задана кодом, вы можете установить для атрибута заголовка элемента ввода значение "Это поле нельзя оставлять пустым". (Работает в 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."
Это, кажется, изменилось, так как я первоначально написал этот ответ. Теперь добавление заголовка не меняет достоверность сообщения, оно просто добавляет приложение к сообщению. Скрипка выше все еще применяется.
Chrome теперь ничего не делает с атрибутом title в Chrome 51. Я не уверен, в какой версии это изменилось.
Я создал небольшую библиотеку, чтобы облегчить изменение и перевод сообщений об ошибках. Вы даже можете изменить текст по типу ошибки, который в настоящее время недоступен с помощью title в Chrome или x-moz-errormessage в Firefox. Go проверить его на 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')">
Установив и отменив setCustomValidity в нужное время, сообщение проверки будет работать безупречно.
<input name="Username" required
oninvalid="this.setCustomValidity('Username cannot be empty.')"
onchange="this.setCustomValidity('')" type="text" />
Я использовал onchange вместо oninput, который является более общим и возникает, когда значение изменяется в любом состоянии даже через JavaScript.
Попробуйте это, это лучше и проверено:
HTML:
<form id="myform">
<input id="email"
oninvalid="InvalidMsg(this);"
oninput="InvalidMsg(this);"
name="email"
type="email"
required="required" />
<input type="submit" />
</form>
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;
}
Демо - версия:
Самый простой и самый чистый способ, который я нашел, - использовать атрибут data для хранения вашей пользовательской ошибки. Проверьте работоспособность node и обработайте ошибку, используя какой-то пользовательский html. 
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>
У меня есть более простое решение ванили js:
Для флажков:
document.getElementById("id").oninvalid = function () {
this.setCustomValidity(this.checked ? '' : 'My message');
};
Для входов:
document.getElementById("id").oninvalid = function () {
this.setCustomValidity(this.value ? '' : 'My message');
};
Это очень простое управление требуемым сообщением типа ввода HTML. Нет необходимости в JS или CSS использовать HTML5.
Сначала вы можете использовать этот атрибут "oninvalid"
<input id="userid" type="text or others" required="" oninvalid="this.setCustomValidity('Hello Username cant be Blank!')">
Или вы можете использовать атрибут "oninput"
<input id="userid" type="text or others" required="" oninvalid="this.setCustomValidity('Hello Username cant be Blank!')" oninput="setCustomValidity('')">
Хорошо, oninvalid работает хорошо, но показывает ошибку, даже если пользователь ввел правильные данные. Поэтому я использовал ниже, чтобы заняться этим, надеюсь, это будет работать и для вас,
oninvalid="this.setCustomValidity('Your custom message.')" onkeyup="setCustomValidity('')"
Решение для предотвращения сообщений об ошибках Google 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 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> Приспосабливая ответ Салара к JSX и React, я заметил, что React Select не ведет себя так же, как поле <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}
/>
);
}
}
Может быть легко обработано, просто поместив 'title' в поле:
<input type="text" id="username" required title="This field can not be empty" />