HTML5 Style de saisie requis
En HTML 5, nous pouvons marquer les entrées avec la variable required, puis les sélectionner avec le pseudo-sélecteur [required] en CSS. Mais je ne veux que leur style quand ils essaient de soumettre le formulaire sans remplir un élément requis. Y at-il un sélecteur pour cela? Que diriez-vous de la petite boîte de message qui apparaît?
Oui, comme SLaks l'a dit, il n'y a pas de sélecteur CSS pour le faire. Je doute que cela entre dans le champ d'application de CSS car CSS aurait besoin de vérifier le contenu d'une entrée.
Votre meilleure option, encore, est probablement d'appeler une fonction de validation javascript lorsque vous cliquez sur un bouton, plutôt que de soumettre le formulaire. Puis, recherchez dans les champs [obligatoires] le contenu approprié et soumettez le formulaire ou mettez en surbrillance les champs obligatoires non renseignés.
JQuery a quelques plugins Nice qui s’occupent de cela pour vous http://docs.jquery.com/Plugins/validation
Vous pouvez utiliser les sélecteurs valides et non valides. Quelque chose comme ça
.field:valid {
border-color:#0f0;
}
.field:invalid {
border-color:#f00;
}
Toutefois, cela ne fonctionnera que dans les navigateurs prenant en charge la validation native et uniquement dans les champs pertinents. Autant que je sache, cela ne concerne pour le moment que Chrome (peut-être Safari, mais n'a pas été vérifié).
Donc, par validation native, je veux dire qu'en chrome si vous faites <input type="email">, la valeur du champ sera validée pour la chaîne de type email (sans javascript supplémentaire), donc les styles ci-dessus fonctionneront. Toutefois, si vous les attachez à un champ type="text" ou à un deuxième champ de mot de passe (qui est supposé correspondre au premier), vous ne deviendrez jamais vert car tout est valide, et dans le cas du mot de passe, il n'y a pas de " tapez "pour cela quand même.
Ce qui signifie fondamentalement que pour prendre en charge tous les navigateurs, et plus important encore, un plus large éventail de validations, vous devez toujours recourir à javascript, auquel cas l'attribution de la classe .valid/.invalid ne devrait pas poser de problème. :)
J'ai eu recours à js pour appliquer une classe de .validated au formulaire lors de l'envoi, puis utiliser cette classe pour styler: invalid fields.eg:
.validated input:invalid {
...
}
De cette manière, les champs ne s'affichent pas comme non valides au chargement de la page, uniquement après la soumission du formulaire. Idéalement, une classe pseodo serait appliquée au formulaire lors de l'envoi.
input:required {
/* Style your required field */
/* Be sure to style it as an individual field rather than just add your desired styles
for a required field. */
}
Essayé et testé en chrome. Je ne l'ai pas testé dans aucun autre navigateur.
Il y a une pseudo-classe :user-error dans le brouillon brouillon de travail de CSS Selectors 4 } qui effectue exactement cela, en activant à la fois le flou d'entrée et la soumission du formulaire.
En attendant, j'utilise personnellement la géniale bibliothèque de bibliothèques Webshims qui couvre: erreur de l'utilisateur, ou vous pourriez vous débrouiller avec quelque chose dans le sens de la réponse de Toby.
Cette solution stylisera les champs de saisie requis via l'attribut while blank. Les navigateurs suppriment la pseudo-classe: invalid lors du remplissage d'un champ obligatoire lors de la saisie du clavier. Les versions récentes de Firefox appliquent automatiquement quelque chose de similaire à ce style, mais pas Chrome et IE.
input[required]:invalid { box-shadow: 0 0 3px 1px red }
Essayez-le: http://jsfiddle.net/2Ph2X/
Très simple, il suffit d'ajouter la classe lorsque l'élément est actif, puis lors de la soumission, l'accent est mis sur les éléments incorrects et que le client remplit et valide un à un. Je crois que c'est la meilleure solution sans utiliser JavaScript.
input:required:focus {
border-color: palegreen;
}
input:invalid:focus {
border-color: salmon;
}