Attribut requis pour le formulaire HTML5. Définir un message de validation personnalisé?
J'ai le formulaire HTML5 suivant: 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"/>Actuellement, lorsque je clique sur Entrée quand ils sont tous les deux vides, une boîte de dialogue contextuelle apparaît pour indiquer "Veuillez remplir ce champ". Comment changer le message par défaut en "Ce champ ne peut pas être laissé vide"?
EDIT: Notez également que le message d'erreur du champ de mot de passe de type est simplement *****. Pour le recréer, attribuez une valeur au nom d'utilisateur et cliquez sur Soumettre.
EDIT: J'utilise Chrome 10 pour les tests. S'il vous plaît faites la même chose
Utilisez 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("");
};
}
})
Je ai changé pour Vanilla JavaScript de Mootools comme suggéré par @itpastorn dans les commentaires, mais vous devriez pouvoir déterminer l’équivalent de Mootools si nécessaire.
Modifier
J'ai mis à jour le code ici car setCustomValidity fonctionne légèrement différemment de ce que j'avais compris quand j'ai initialement répondu. Si setCustomValidity est défini sur autre chose que la chaîne vide, le champ sera considéré comme non valide; par conséquent, vous devez l'effacer avant de tester la validité, vous ne pouvez pas simplement le définir et l'oublier.
Plus loin éditer
Comme indiqué dans le commentaire de @ thomasvdb ci-dessous, vous devez effacer la validité personnalisée dans certains cas en dehors de invalid. Dans le cas contraire, le gestionnaire oninvalid peut effectuer une passe supplémentaire pour l'effacer.
Voici le code pour gérer le message d'erreur personnalisé en HTML5
<input type="text" id="username" required placeholder="Enter Name"
oninvalid="this.setCustomValidity('Enter User Name Here')"
oninput="this.setCustomValidity('')" />
Cette partie est importante car elle masque le message d'erreur lorsque l'utilisateur entre de nouvelles données:
oninput="this.setCustomValidity('')"
C'est très simple de contrôler les messages personnalisés à l'aide de HTML5 événement oninvalid
Voici le code:
<input id="UserID" type="text" required="required"
oninvalid="this.setCustomValidity('Witinnovation')"
onvalid="this.setCustomValidity('')">
C'est le plus important:
onvalid="this.setCustomValidity('')"
Remarque: Ceci ne fonctionne plus dans Chrome, ni testé dans les autres navigateurs. Voir les modifications ci-dessous. Cette réponse est laissée ici pour référence historique.
Si vous estimez que la chaîne de validation ne doit pas être définie par un code, vous pouvez définir l'attribut title de votre élément d'entrée comme suit: "Ce champ ne peut pas être laissé vide". (Fonctionne dans Chrome 10)
title="This field should not be left blank."
Voir http://jsfiddle.net/kaleb/nfgfP/8/
Et dans Firefox, vous pouvez ajouter cet attribut:
x-moz-errormessage="This field should not be left blank."
Modifier
Cela semble avoir changé depuis que j'ai écrit cette réponse. Maintenant, ajouter un titre ne change pas le message de validité, il ajoute simplement un addenda au message. Le violon ci-dessus s'applique toujours.
Modifier 2
Chrome ne fait maintenant plus rien avec l'attribut title à partir de Chrome 51. Je ne sais pas dans quelle version cela a changé.
J'ai créé une petite bibliothèque pour faciliter le changement et la traduction des messages d'erreur. Vous pouvez même modifier les textes par type d'erreur qui n'est actuellement pas disponible avec title dans Chrome ou x-moz-errormessage dans Firefox. Allez vérifiez-le sur GitHub , et donnez vos impressions.
C'est utilisé comme:
<input type="email" required data-errormessage-value-missing="Please input something">
Une démo est disponible sur jsFiddle .
C'est très simple de contrôler les messages personnalisés à l'aide de l'événement HTML5oninvalid
Voici le code:
User ID
<input id="UserID" type="text" required
oninvalid="this.setCustomValidity('User ID is a must')">
En définissant et en désélectionnant le setCustomValidity au bon moment, le message de validation fonctionnera parfaitement.
<input name="Username" required
oninvalid="this.setCustomValidity('Username cannot be empty.')"
onchange="this.setCustomValidity('')" type="text" />
J'ai utilisé onchange au lieu de oninput, qui est plus général et se produit lorsque la valeur est modifiée dans n'importe quelle condition, même via JavaScript.
Essayez celui-ci, son meilleur et testé:
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;
}
Démo:
C’est très simple de contrôler le type de message HTML requis. Pas besoin de JS, ou CSS n'utilise que HTML5.
D'abord, vous pouvez utiliser cet attribut "oninvalid" uniquement
<input id="userid" type="text or others" required="" oninvalid="this.setCustomValidity('Hello Username cant be Blank!')">
Ou vous pouvez utiliser avec l'attribut "oninput"
<input id="userid" type="text or others" required="" oninvalid="this.setCustomValidity('Hello Username cant be Blank!')" oninput="setCustomValidity('')">
Le moyen le plus simple et le plus simple que j'ai trouvé consiste à utiliser un attribut de données pour stocker votre erreur personnalisée. Testez la validité du noeud et gérez l'erreur en utilisant du code HTML personnalisé. 
le javascript
if(node.validity.patternMismatch)
{
message = node.dataset.patternError;
}
et quelques super HTML5
<input type="text" id="city" name="city" data-pattern-error="Please use only letters for your city." pattern="[A-z ']*" required>
J'ai une solution plus simple Vanilla js:
Pour les cases à cocher:
document.getElementById("id").oninvalid = function () {
this.setCustomValidity(this.checked ? '' : 'My message');
};
Pour les intrants:
document.getElementById("id").oninvalid = function () {
this.setCustomValidity(this.value ? '' : 'My message');
};
La solution pour éviter les messages d'erreur Google Chrome lors de la saisie de chaque symbole:
<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>Ok, oninvalid fonctionne bien, mais une erreur est affichée même si l'utilisateur a entré des données valides. J'ai donc utilisé ci-dessous pour le résoudre, j'espère que cela fonctionnera pour vous également,
oninvalid="this.setCustomValidity('Your custom message.')"onkeyup="setCustomValidity('')"
Peut être facilement manipulé en mettant simplement 'title' dans le champ:
<input type="text" id="username" required title="This field can not be empty" />
Adaptation de la réponse de Salar à JSX et à React, j'ai remarqué que React Select ne se comportait pas comme un champ <input/> concernant la validation. Apparemment, plusieurs solutions de contournement sont nécessaires pour afficher uniquement le message personnalisé et l'empêcher de s'afficher à des moments inopportuns.
J'ai soulevé un problème ici , si cela aide quelque chose. Ici est une CodeSandbox avec un exemple de travail, et le code le plus important est reproduit ici:
Bonjour.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}
/>
);
}
}