Maison >interface Web >tutoriel CSS >Le guide complet des formulaires HTML et la validation des contraintes

Le guide complet des formulaires HTML et la validation des contraintes

尊渡假赌尊渡假赌尊渡假赌original: 2025-02-10 08:27:09886parcourir

Dans cet article, nous examinons les champs de formulaire HTML et les options de validation offertes par HTML5. Nous examinerons également comment ceux-ci peuvent être améliorés grâce à l'utilisation de CSS et JavaScript.

Les plats clés

html5 améliore la validation du formulaire en introduisant de nouveaux types et attributs d'entrée qui automatisent de nombreux processus de validation, en réduisant le besoin d'un JavaScript étendu.
La validation des contraintes dans HTML5 permet aux navigateurs de vérifier automatiquement la saisie des utilisateurs par rapport aux règles spécifiées avant la soumission du formulaire, l'amélioration de l'expérience utilisateur et l'intégrité des données.
La validation côté client, bien que utile pour attraper des erreurs courantes, doit être complétée par une validation côté serveur pour garantir la sécurité et l'intégrité des données.
Les entrées JavaScript personnalisées doivent être évitées lorsque cela est possible, car ils compliquent l'accessibilité et peuvent entrer en conflit avec les fonctions du navigateur natif.
CSS peut être utilisé pour styliser les champs d'entrée en fonction de leur état de validation, avec des pseudo-classes comme: valide et: non valide, permettant des commentaires dynamiques sur les entrées utilisateur.
L'API de validation des contraintes dans HTML5 permet des scénarios de validation personnalisés que le HTML ne peut pas gérer seul, comme la comparaison de deux champs ou des vérifications asynchrones, améliorant les fonctionnalités de formulaire et l'interaction utilisateur.

Qu'est-ce que la validation des contraintes?

Chaque champ de formulaire a un but. Et ce but est souvent régi par les contre-contraintes - ou les règles régissant ce qui devrait et ne devrait pas être saisi dans chaque champ de formulaire. Par exemple, un champ de messagerie nécessitera une adresse e-mail valide; Un champ de mot de passe peut nécessiter certains types de caractères et avoir un nombre minimum de caractères requis; Et un champ de texte pourrait avoir une limite sur le nombre de caractères peut être entré.

Les navigateurs modernes ont la possibilité de vérifier que ces contraintes sont observées par les utilisateurs et peuvent les avertir lorsque ces règles ont été enfreintes. Ceci est connu sous le nom de validation Contstraint.

Vers VS VS VS Validation côté serveur

La majorité du code JavaScript écrit dans les premières années de la validation du formulaire côté client géré par la langue. Aujourd'hui encore, les développeurs passent beaucoup de temps à écrire des fonctions pour vérifier les valeurs du champ. Est-ce encore nécessaire dans les navigateurs modernes? Probablement pas . Dans la plupart des cas, cela dépend vraiment de ce que vous essayez de faire.

Mais d'abord, voici un grand message d'avertissement:

La validation côté client est une délicate qui peut empêcher les erreurs de données de données courantes avant qu'une application ne perde du temps et la bande passante d'envoi de données à un serveur. Ce n'est pas un substitut à la validation côté serveur!

désinfecter toujours le côté du serveur de données. Toutes les demandes ne proviendront pas d'un navigateur. Même lorsqu'il le fait, il n'y a aucune garantie que le navigateur a validé les données. Quiconque sait ouvrir les outils de développeur d'un navigateur peut également contourner votre HTML et JavaScript.

champs d'entrée html5

Html Offres:

pour les zones de texte multiline
pour une liste déroulante des options
pour… les boutons

mais vous utiliserez le plus souvent:

<span><span><span><input</span> type<span>="text"</span> name<span>="username"</span> /></span>
</span>

L'attribut de type définit le type de contrôle, et il y a un grand choix d'options:

Type Description bouton un bouton sans comportement par défaut cocher Une case à cocher / coche couleur un cueilleur de couleurs date un cueilleur de rendez-vous pour l'année, le mois et le jour datetime-local un cueilleur de date et d'heure e-mail un champ d'entrée par e-mail déposer un sélecteur de fichiers caché Un champ caché image un bouton qui affiche l'image définie par l'attribut SRC mois Picker d'un mois et d'un an nombre un champ d'entrée numérique mot de passe un champ d'entrée de mot de passe avec du texte obscurci radio un bouton radio gamme un contrôle des curseurs réinitialiser Un bouton qui réinitialise toutes les entrées de formulaire à leurs valeurs par défaut (mais évitez de l'utiliser, car elle est rarement utile) recherche un champ d'entrée de recherche soumettre un bouton de soumission de formulaire Tél un champ d'entrée de numéro de téléphone texte un champ d'entrée de texte temps Un sélecteur de temps sans fuseau horaire URL un champ d'entrée d'URL semaine un numéro de semaine et un cueilleur d'année

Le navigateur retombe au texte si vous omettez l'attribut de type ou s'il ne prend pas en charge une option. Les navigateurs modernes ont un bon support pour tous les types, mais les anciens navigateurs afficheront toujours un champ d'entrée de texte.

D'autres attributs utiles incluent:

attribut Description accepter Type de téléchargement de fichiers alt Texte alternatif pour les types d'images assortiment automatique Astuce pour la complétion automatique sur le terrain autofocus Champ de mise au point sur le chargement de la page capturer Méthode d'entrée de capture de support à carreaux Checkbox / Radio est coché désactivé Désactiver le contrôle (il ne sera pas validé ou ne fera pas soumettre sa valeur) formulaire associer à un formulaire en utilisant cet identifiant foraction URL pour soumission sur les boutons de soumission et d'image entrée indice de type de données liste ID de Options de saisie semi-automatique max valeur maximale maxlange longueur de chaîne maximale min valeur minimale minlengle Longueur de chaîne minimale nom Nom du contrôle, comme soumis au serveur modèle Un modèle d'expression régulière, comme [A-Z] pour un ou plusieurs caractères majuscules espace réservé Texte d'espace réservé lorsque la valeur du champ est vide lire en lecture Le champ n'est pas modifiable, mais il sera toujours validé et soumis requis Le champ est requis taille la taille du contrôle (souvent remplacée en CSS) cocher définir la vérification des orthographes réalité SRC URL d'image étape Valeurs incrémentielles dans les nombres et les plages taper Type de champ (voir ci-dessus) valeur la valeur initiale

champs de sortie HTML

ainsi que les types d'entrée, HTML5 fournit des sorties en lecture seule:

Sortie: Résultat du texte d'un calcul ou d'une action de l'utilisateur
Progrès: une barre de progression avec valeur et attributs max
mètre: une échelle qui peut changer entre vert, ambre et rouge en fonction des valeurs définies pour la valeur, min, max, faible, élevée et optimale attributs.

Étiquettes d'entrée

Les champs devraient avoir un associé, que vous pouvez enrouler autour de l'élément:

<span><span><span><input</span> type<span>="text"</span> name<span>="username"</span> /></span>
</span>

ou liez l'ID du champ à l'étiquette à l'aide d'un attribut pour l'attribut:

<span><span><span><label</span>></span>your name <span><span><input</span> type<span>="text"</span> name<span>="name"</span> /></span><span><span><label</span>></span>
</span>

Les étiquettes sont importantes pour l'accessibilité. Vous avez peut-être rencontré des formulaires qui utilisent un espace réservé pour enregistrer l'espace d'écran:

<span><span><span><label</span> for<span>="nameid"</span>></span>your name<span><span></label</span>></span>
</span><span><span><span><input</span> type<span>="text"</span> id<span>="nameid"</span> name<span>="name"</span> /></span>
</span>

Le texte de l'espace réservé disparaît une fois que l'utilisateur tape quelque chose - même un seul espace. Il vaut mieux montrer une étiquette que de forcer l'utilisateur à se souvenir de ce que le champ voulait!

Comportements d'entrée

Les types de champs et les attributs de contrainte modifient le comportement d'entrée du navigateur. Par exemple, une entrée de nombre affiche un clavier numérique sur les appareils mobiles. Le champ peut afficher un spinner et un clavier vers le haut / vers le bas, les presses de curseur augmenteront et décrément les valeurs.

La plupart des types de champs sont évidents, mais il y a des exceptions. Par exemple, les cartes de crédit sont numériques, mais le spinner incrémente / décrément est inutile et il est trop facile de repousser ou de descendre lors de la saisie d'un numéro à 16 chiffres. Il est préférable d'utiliser un type de texte standard, mais de définir l'attribut InputMode à Numeric, qui montre un clavier approprié. Le réglage AutoChatletel = "CC-Number" suggère également tout numéro de carte préconfiguré ou précédemment entré.

L'utilisation du type de champ correct et de la correction automatique offre des avantages qui seraient difficiles à réaliser en JavaScript. Par exemple, certains navigateurs mobiles peuvent:

Importez les détails de la carte de crédit en scannant une carte à l'aide de la caméra
Importer des codes uniques envoyés par SMS

Validation automatique

Le navigateur garantit qu'une valeur d'entrée adhère aux contraintes définies par les attributs types, min, max, étape, minLength, MaxLength, motif et requis. Par exemple:

<span><span><span><input</span> type<span>="text"</span> name<span>="name"</span> value<span>=""</span> placeholder<span>="your name"</span> /></span>
</span>

Tenter de soumettre une valeur vide empêche la soumission du formulaire et affiche le message suivant dans Chrome:

Le guide complet des formulaires HTML et la validation des contraintes

Les filateurs n'autoriseront pas les valeurs en dehors de la plage 1 à 100. Des messages de validation similaires apparaissent si vous tapez une chaîne qui n'est pas un nombre. tout sans une seule ligne de javascript.

Vous pouvez arrêter la validation du navigateur par:

ajoutant un attribut novaliate à l'élément
ajoutant un attribut FormNovateDid au bouton de soumission ou à l'image

Création d'entrées JavaScript personnalisées

Si vous écrivez un nouveau composant d'entrée de date basé sur JavaScript, veuillez vous arrêter et vous éloigner de votre clavier!

L'écriture de contrôles d'entrée personnalisés est difficile. Vous devez considérer la souris, le clavier, le toucher, la parole, l'accessibilité, les dimensions d'écran et ce qui se passe lorsque JavaScript échoue. Vous créez également une expérience utilisateur différente. Peut-être que votre contrôle est supérieur au sélecteur de dattes standard sur le bureau, iOS et Android, mais l'interface utilisateur inconnue confondre certains utilisateurs.

Il y a trois raisons principales pour lesquelles les développeurs choisissent de créer des entrées basées sur JavaScript.

1. Les commandes standard sont difficiles à coiffer

Le style CSS est limité et nécessite souvent des hacks, tels que la superposition d'une entrée avec son étiquette :: avant et :: après les pseudo-éléments. La situation s'améliore, mais remet en question toute conception qui priorise la forme sur la fonction.

2. Les types de modernes ne sont pas pris en charge dans les anciens navigateurs

Essentiellement, vous codiez pour Internet Explorer. IE Les utilisateurs n'obtiendront pas de sélecteur de dattes mais peuvent toujours saisir les dates au format Yyyy-MM-DD. Si votre client insiste, alors chargez un polyfill dans IE uniquement. Il n'est pas nécessaire de bourser les navigateurs modernes.

3. Vous avez besoin d'un nouveau type d'entrée qui n'a jamais été implémenté auparavant

Ces situations sont rares, mais commencent toujours par des champs HTML5 appropriés. Ils sont rapides et ils fonctionnent même avant que le script ne se charge. Vous pouvez améliorer progressivement les champs si nécessaire. Par exemple, une pincée de JavaScript peut garantir la date de fin d'un événement de calendrier après une date de début.

en résumé: Évitez de réinventer les contrôles HTML!

CSS Validation Style

Vous pouvez appliquer les pseudo-classes suivantes dans les champs d'entrée pour les styliser en fonction de l'état actuel:

sélecteur Description :se concentrer le champ avec focus : Focus-within Un élément contient un champ avec focus (oui, c'est un sélecteur de parents!) : Focus-visible Un élément se concentre en raison de la navigation au clavier, donc une bague de mise au point ou un style plus évident est nécessaire :requis un champ avec un attribut requis :facultatif un champ sans attribut requis :valide un champ qui a réussi la validation :invalide un champ qui n'a pas réussi à valider : Valud utilisateur Un champ qui a réussi une validation après que l'utilisateur a interagi avec elle (Firefox uniquement) : invalide de l'utilisateur Un champ qui n'a pas réussi une validation après que l'utilisateur a interagi avec elle (Firefox uniquement) : en gamme La valeur est à portée de gamme sur un nombre ou une entrée de plage : hors de portée La valeur est hors de portée sur un nombre ou une entrée de plage :désactivé un champ avec un attribut désactivé :activé un champ sans attribut désactivé : en lecture seule un champ avec un attribut en lecture seule : lecture-écriture: un champ sans attribut en lecture seule :à carreaux une case à cocher cochée ou un bouton radio :indéterminé une case à cocher indéterminée ou un état radio, comme lorsque tous les boutons radio ne sont pas contrôlés :défaut Le bouton ou l'image de soumission par défaut

Vous pouvez styliser le texte de l'espace pour l'entrée avec le :: Placeholder pseudo-élément:

<span><span><span><input</span> type<span>="text"</span> name<span>="username"</span> /></span>
</span>

Les sélecteurs ci-dessus ont la même spécificité, donc l'ordre peut être important. Considérez cet exemple:

<span><span><span><label</span>></span>your name <span><span><input</span> type<span>="text"</span> name<span>="name"</span> /></span><span><span><label</span>></span>
</span>

Les entrées non valides ont du texte rouge, mais il n'est appliqué qu'aux entrées avec un attribut désactivé - donc toutes les entrées activées sont noires.

Le navigateur applique des styles de validation sur le chargement de la page. Par exemple, dans le code suivant, chaque champ non valide reçoit une bordure rouge:

<span><span><span><label</span> for<span>="nameid"</span>></span>your name<span><span></label</span>></span>
</span><span><span><span><input</span> type<span>="text"</span> id<span>="nameid"</span> name<span>="name"</span> /></span>
</span>

L'utilisateur est confronté à un ensemble intimidant de boîtes rouges avant d'interagir avec le formulaire. Afficher les erreurs de validation après le premier soumission ou une valeur modifiée offrirait une meilleure expérience. C'est là que JavaScript intervient…

JavaScript et l'API de validation de contrainte

L'API de validation des contraintes fournit des options de personnalisation de formulaire qui peuvent améliorer la vérification standard du champ HTML. Vous pourriez:

Arrêtez la validation jusqu'à ce que l'utilisateur interagit avec un champ ou soumet le formulaire
Afficher les messages d'erreur avec un style personnalisé
Fournir une validation personnalisée impossible dans HTML seul. Ceci est souvent nécessaire lorsque vous devez comparer deux entrées - par exemple lorsque vous entrez une adresse e-mail ou un numéro de téléphone, vérifiez les champs de mot de passe «nouveaux» et «confirmer» ont la même valeur, ou garantir qu'une date arrive après l'autre.

Validation du formulaire

Avant d'utiliser l'API, votre code doit désactiver la validation par défaut et les messages d'erreur en définissant la propriété Novalidate du formulaire sur true (identique à l'ajout d'un attribut novaliate):

<span><span><span><input</span> type<span>="text"</span> name<span>="name"</span> value<span>=""</span> placeholder<span>="your name"</span> /></span>
</span>

Vous pouvez ensuite ajouter des gestionnaires d'événements - comme lorsque le formulaire se soumet:

<span><span><span><input</span> type<span>="number"</span> min<span>="1"</span> max<span>="100"</span> required /></span>
</span>

Le gestionnaire peut vérifier que l'ensemble du formulaire est valide à l'aide des méthodes CheckValidity () ou ReportValidity (), qui renvoient vrai lorsque toutes les entrées du formulaire sont valides. (La différence est que CheckValidity () vérifie si les entrées sont soumises à la validation des contraintes.)

Les documents Mozilla expliquent:

Un événement non valide est également déclenché sur tous les champs non valides. Cela ne bouillonne pas: les gestionnaires doivent être ajoutés à chaque contrôle qui l'utilise.

<span>/* blue placeholder on email fields */
</span><span>input<span><span>[type="email"]</span>::placeholder</span> {
</span>  <span>color: blue;
</span><span>}
</span>

Un formulaire valide pourrait désormais entraîner d'autres vérifications de validation. De même, une forme non valide pourrait avoir mis en évidence les champs non valides.

Validation de champ

Les champs individuels ont les propriétés de validation des contraintes suivantes:

WillValidate: Renvoie True si l'élément est un candidat pour la validation des contraintes.
ValidationMessage: le message de validation. Ce sera une chaîne vide si le champ est valide.
VALITÉ: Un objet ValidityState. Cela a un ensemble de propriétés valide vrai lorsque le champ est valide. S'il est faux, une ou plusieurs des propriétés suivantes seront vraies:
ValidityState Description .Badinput Le navigateur ne peut pas comprendre l'entrée .Customororror Un message de validité personnalisé a été défini .Patternmismatch La valeur ne correspond pas à l'attribut de modèle spécifié .Rangeoverflow La valeur est supérieure à l'attribut max .Rangeunderflow La valeur est inférieure à l'attribut min .Stepmismatch La valeur ne correspond pas aux règles d'attribut de pas . La longueur de chaîne est supérieure à l'attribut maxLength .Tooshort la longueur de chaîne est inférieure à l'attribut minLength .Typemismatch La valeur n'est pas un e-mail ou une URL valide .Valumemissing Une valeur requise est vide

Les champs individuels ont les méthodes de validation des contraintes suivantes:

setCustomValidité (message): définit un message d'erreur pour un champ non valide. Une chaîne vide doit être transmise lorsque le champ est valide ou que le champ restera invalide pour toujours.
CheckValidity (): Renvoie True lorsque l'entrée est valide. La propriété Vality.Valid fait la même chose, mais CheckValidity () déclenche également un événement non valide sur le terrain qui pourrait être utile.

La fonction de gestionnaire valideform () pourrait traverser chaque champ et appliquer une classe non valide à son élément parent lorsque cela est nécessaire:

<span><span><span><input</span> type<span>="text"</span> name<span>="username"</span> /></span>
</span>

Supposons que votre HTML défini un champ de messagerie:

<span><span><span><label</span>></span>your name <span><span><input</span> type<span>="text"</span> name<span>="name"</span> /></span><span><span><label</span>></span>
</span>

Le script applique une classe non valide au

lorsque l'e-mail n'est pas spécifié ou n'est pas valide. CSS peut afficher ou masquer le message de validation lorsque le formulaire est soumis:

<span><span><span><label</span> for<span>="nameid"</span>></span>your name<span><span></label</span>></span>
</span><span><span><span><input</span> type<span>="text"</span> id<span>="nameid"</span> name<span>="name"</span> /></span>
</span>

Création d'un validateur de formulaire personnalisé

La démonstration suivante montre un exemple de formulaire de contact qui nécessite un nom d'utilisateur et soit une adresse e-mail, un numéro de téléphone ou les deux:

Voir le stylo Exemple de l'API de validation des contraintes par SitePoint (@SitePoint) sur codepen.

Il est implémenté à l'aide d'une classe de validation de formulaire générique nommée FormValidate. Un élément de forme est passé lors de l'instanciation d'un objet. Un deuxième paramètre facultatif peut être défini:

fidèle à valider chaque champ lorsque l'utilisateur interagit avec lui
false (la valeur par défaut) pour valider tous les champs après la première soumission (validation au niveau du champ se produit après cela)

<span><span><span><input</span> type<span>="text"</span> name<span>="name"</span> value<span>=""</span> placeholder<span>="your name"</span> /></span>
</span>

Une méthode .AddCustom (champ, func) définit les fonctions de validation personnalisées. Le code suivant garantit que les champs e-mail ou Tel sont valides (aucun des attributs requis):

<span><span><span><input</span> type<span>="number"</span> min<span>="1"</span> max<span>="100"</span> required /></span>
</span>

Un objet FormValidate surveille les deux suivants:

Événements de mise au point, qui vérifient ensuite un champ individuel
Formulaire Soumettre des événements, qui vérifient ensuite tous les champs

Les deux appellent la méthode .validaField (champ), qui vérifie si un champ transmet la validation des contraintes standard. Lorsqu'il le fait, toutes les fonctions de validation personnalisées affectées à ce champ s'exécutent à leur tour. Tout doit revenir vrai pour que le champ soit valide.

Les champs non valides ont une classe non valide appliquée à l'élément parent du champ, qui affiche un message d'aide rouge à l'aide de CSS.

Enfin, l'objet appelle une fonction de soumission personnalisée lorsque l'ensemble du formulaire est valide:

<span><span><span><input</span> type<span>="text"</span> name<span>="username"</span> /></span>
</span>

Alternativement, vous pouvez utiliser un AddEventListener standard pour gérer les événements de soumission de formulaire, car FormValidate empêche d'autres gestionnaires en cours d'exécution lorsque le formulaire n'est pas valide.

forment finesse

Les formulaires sont à la base de toutes les applications Web et les développeurs passent un temps considérable à manipuler les entrées utilisateur. La validation des contraintes est bien prise en charge: les navigateurs peuvent gérer la plupart des vérifications et afficher les options d'entrée appropriées.

Recommandations:

Utilisez les types d'entrée HTML standard lorsque cela est possible. Définir Min, Max, Step, MinLength, MaxLength, Match, Required, InputMode et Autocle Assomplete Selon Goot.
Si nécessaire, utilisez un petit javascript pour activer la validation et les messages personnalisés.
Pour les champs plus complexes, améliorez progressivement les entrées standard.

Enfin: Oubliez Internet Explorer!

à moins que vos clients ne soient principalement des utilisateurs, c'est-à-dire des utilisateurs, il n'est pas nécessaire d'implémenter vos propres fonctions de validation de secours. Tous les champs d'entrée HTML5 fonctionnent dans IE mais peuvent nécessiter plus d'effort utilisateur. (Par exemple, IE ne détectera pas lorsque vous entrez une adresse e-mail non valide.) Vous devez toujours valider des données sur le serveur, alors envisagez de l'utiliser comme base de la vérification des erreurs IE.

Questions fréquemment posées (FAQ) sur les formulaires HTML et la validation des contraintes

Quelle est l'importance de la validation du formulaire HTML?

La validation de la forme HTML est un aspect crucial du développement Web. Il garantit que les données entrées par les utilisateurs dans un formulaire répondent à certains critères avant d'être envoyée au serveur. Cela ne maintient pas seulement l'intégrité des données, mais améliore également l'expérience utilisateur en fournissant une rétroaction immédiate sur l'exactitude des données saisies. Sans validation de formulaire, il existe un risque de recevoir des données incorrectes, incomplètes ou même malveillantes, ce qui peut entraîner divers problèmes, notamment la corruption des données, les violations de sécurité et les accidents du système.

Comment HTML5 améliore-t-il la validation du formulaire?

HTML5 introduit plusieurs éléments et attributs de nouveaux formulaires qui facilitent la validation de la forme beaucoup plus facile et plus efficace. Par exemple, il fournit de nouveaux types d'entrée tels que le courrier électronique, l'URL et le numéro, qui valident automatiquement les données d'entrée en fonction du type. Il introduit également de nouveaux attributs tels que requis, modèle et min / max qui vous permettent de spécifier diverses contraintes sur les données d'entrée. De plus, HTML5 fournit une API de validation intégrée qui vous permet d'effectuer une validation personnalisée à l'aide de JavaScript.

Puis-je effectuer la validation du formulaire sans javascrip seul. HTML5 fournit plusieurs nouveaux types et attributs d'entrée qui vous permettent de spécifier diverses contraintes sur les données d'entrée. Par exemple, vous pouvez utiliser l'attribut requis pour rendre un champ obligatoire, l'attribut de modèle pour appliquer un format spécifique et les attributs min / max pour définir une plage pour l'entrée numérique. Cependant, pour une validation plus complexe, vous devrez peut-être toujours utiliser JavaScript.

Comment puis-je personnaliser les messages d'erreur dans la validation du formulaire HTML5?

HTML5 fournit une API de validation qui vous permet de personnaliser le messages d'erreur. Vous pouvez utiliser la méthode SetCustomValidité de l'objet ValidityState pour définir un message d'erreur personnalisé pour un champ. Cette méthode prend un argument de chaîne, qui devient le message de validation du champ lorsque le champ n'est pas valide. Vous pouvez appeler cette méthode en réponse à l'événement invalide, qui est licencié lorsqu'un champ échoue à la validation.

Comment puis-je désactiver la validation du formulaire HTML5?

Vous pouvez désactiver la validation du formulaire HTML5 en ajoutant le Novalidate Attribut à l'élément de forme. Lorsque cet attribut est présent, le navigateur n'effectuera aucune validation sur le formulaire lors de sa soumission. Cela peut être utile si vous souhaitez gérer entièrement la validation sur le côté du serveur ou l'utilisation de JavaScript personnalisé.

Comment puis-je valider plusieurs champs ensemble dans HTML5?

HTML5 ne fournit pas un intégré- en voie de valider plusieurs champs ensemble. Cependant, vous pouvez y parvenir en utilisant JavaScript. Vous pouvez rédiger une fonction de validation personnalisée qui vérifie les valeurs de plusieurs champs et définit un message de validité personnalisé s'il ne répond pas aux critères requis. Vous pouvez appeler cette fonction en réponse à l'événement de soumission du formulaire ou aux événements d'entrée / modification des champs.

Comment puis-je valider un champ en fonction de la valeur d'un autre champ dans html5?

html5 Ne fournit pas de moyen intégré de valider un champ en fonction de la valeur d'un autre champ. Cependant, vous pouvez y parvenir en utilisant JavaScript. Vous pouvez écrire une fonction de validation personnalisée qui vérifie la valeur d'un champ par rapport à la valeur d'un autre champ et définit un message de validité personnalisé s'il ne correspond pas. Vous pouvez appeler cette fonction en réponse aux événements d'entrée / changement des champs.

Comment puis-je effectuer la validation asynchrone dans HTML5?

HTML5 ne prend pas en charge la validation asynchrone hors de la boîte. Cependant, vous pouvez y parvenir en utilisant JavaScript. Vous pouvez écrire une fonction de validation personnalisée qui effectue une opération asynchrone, telle qu'une demande AJAX, et définit un message de validité personnalisé en fonction du résultat. Vous pouvez appeler cette fonction en réponse aux événements d'entrée / modification des champs ou à l'événement de soumission du formulaire.

Comment puis-je styliser les messages d'erreur dans la validation du formulaire HTML5?

L'apparition de l'erreur Les messages dans la validation du formulaire HTML5 sont déterminés par le navigateur et ne peuvent pas être directement stylisés à l'aide de CSS. Cependant, vous pouvez créer des messages d'erreur personnalisés à l'aide de JavaScript et les styliser comme vous le souhaitez. Vous pouvez utiliser l'API de validation pour déterminer quand un champ n'est pas valide et afficher un message d'erreur personnalisé en conséquence.

Comment puis-je tester la validation d'un formulaire HTML?

Vous pouvez tester la validation de la validation de Un formulaire HTML en entrant différents types de données dans les champs et en essayant de soumettre le formulaire. Vous devez tester avec des données valides et non valides pour vous assurer que la validation fonctionne correctement dans tous les cas. Vous pouvez également utiliser des outils de test automatisés ou des bibliothèques pour effectuer des tests plus complets.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Utilisation de SVG avec des requêtes multimédiasArticle suivant：Utilisation de SVG avec des requêtes multimédias

Articles Liés

Voir plus