HTML5 attribut requis du formulaire. Définir un message de validation personnalisé?
j'ai le formulaire HTML5 suivant: http://jsfiddle.net/nfgfP /
html lang-html prettyprint-override"><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 enter alors qu'ils sont tous les deux Vierges, une fenêtre popup apparaît disant "please fill out this field". Comment changer ce message par défaut en "ce champ ne peut pas être laissé en blanc"?
modifier: noter aussi que le message d'erreur du champ de mot de passe de type est simplement *****
. Pour recréer ceci donnez à l'utilisateur un nom de valeur et appuyez sur soumettre.
EDIT : J'utilise Chrome 10 pour les tests. Merci de faire de même
13 réponses
Utilisation 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 changé en JavaScript vanille de Mootools comme suggéré par @itpastorn dans les commentaires, mais vous devriez être en mesure de travailler sur les Mootools équivalent si nécessaire.
Modifier
j'ai mis à jour le code ici comme setCustomValidity
fonctionne un peu différemment de ce que j'ai compris quand j'ai répondu à l'origine. Si setCustomValidity
est défini à quelque chose d'autre que la chaîne vide, il fera que le champ sera considéré comme invalide; par conséquent, vous devez l'effacer avant de tester la validité, vous ne pouvez pas simplement le définir et oublier.
modifier
comme indiqué dans le commentaire de @thomasvdb ci-dessous, vous devez effacer la validité personnalisée dans certains cas en dehors de invalid
sinon il peut y avoir un passage supplémentaire par le handler oninvalid
pour l'effacer.
voici le code pour gérer le Message D'erreur personnalisé dans 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 cache le message d'erreur lorsque l'utilisateur entre de nouvelles données:
oninput="this.setCustomValidity('')"
il 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('')"
Note: cela ne fonctionne plus dans Chrome, pas testé dans d'autres navigateurs. Voir les modifications ci-dessous. Cette réponse est laissée ici pour référence historique.
si vous pensez que la chaîne de validation ne devrait pas être définie par le code, vous pouvez définir l'attribut title de l'élément d'entrée pour lire"ce champ ne peut pas être laissé en blanc". (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 à l'origine. Maintenant l'ajout d'un titre ne change pas le message de validité, il ajoute simplement un addendum au message. Le violon ci-dessus s'applique toujours.
Edit 2
Chrome ne fait plus rien avec L'attribut title à partir de Chrome 51. Je ne suis pas sûr dans quelle version cela a changé.
j'ai fait une petite bibliothèque pour faciliter la modification et traduction des messages d'erreur. Vous pouvez même modifier les textes par type d'erreur qui n'est actuellement pas disponible en utilisant title
dans Chrome ou x-moz-errormessage
dans Firefox. Aller vérifier sur GitHub , et donner des commentaires.
c'est utilisé comme:
<input type="email" required data-errormessage-value-missing="Please input something">
il y a une démo disponible à jsFiddle .
il est très simple de contrôler les messages personnalisés à l'aide du HTML5
oninvalid
événement
voici le code:
User ID
<input id="UserID" type="text" required
oninvalid="this.setCustomValidity('User ID is a must')">
en réglant et en désactivant 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
ce qui est plus général et se produit quand la valeur est changée dans n'importe quelle condition même par JavaScript.
essayez celui-ci, il est mieux 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:
il s'agit d'un message très simple de contrôle du type D'entrée HTML requis. Pas besoin JS, ou CSS utilisez uniquement HTML5.
tout D'abord, vous pouvez utiliser cet attribut seulement" oninvalid
<input id="userid" type="text or others" required="" oninvalid="this.setCustomValidity('Hello Username cant be Blank!')">
ou vous pouvez utiliser avec "Oninput" attribut
<input id="userid" type="text or others" required="" oninvalid="this.setCustomValidity('Hello Username cant be Blank!')" oninput="setCustomValidity('')">
la façon la plus facile et la plus propre que j'ai trouvé est d'utiliser un attribut de données pour stocker votre erreur personnalisée. Tester la validité du noeud et gérer l'erreur en utilisant du html personnalisé.
le javascript
if(node.validity.patternMismatch)
{
message = node.dataset.patternError;
}
et certains 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 de vanille js seulement:
pour les cases à cocher:
document.getElementById("id").oninvalid = function () {
this.setCustomValidity(this.checked ? '' : 'My message');
};
pour les entrées:
document.getElementById("id").oninvalid = function () {
this.setCustomValidity(this.value ? '' : 'My message');
};
adaptation Salar ' S réponse à JSX et React, j'ai remarqué que React Select ne se comporte pas comme un champ <input/>
en ce qui concerne la validation. Apparemment, plusieurs solutions de rechange sont nécessaires pour montrer seulement le message personnalisé et de l'empêcher de montrer aux moments difficiles.
j'ai soulevé une question ici , si ça peut vous aider. ici est un CodeSandbox avec un exemple de travail, et le plus Code important il 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}
/>
);
}
}
OK, oninvalid fonctionne bien mais il montre l'erreur même si l'Utilisateur a entré des données valides. J'ai donc utilisé ci-dessous pour le combattre, espérons que cela fonctionnera pour vous aussi,
oninvalid="this.setCustomValidity('Your custom message.')"
onkeyup="setCustomValidity('')"