Dans tous les cas, les données envoyées sont des strings (même si elles peuvent représenter un nombre, une date, ...)
sans <form>
= vérifications faites durant la frappe (par le navigateur)
La valeur des champs peuvent être vérifiée lorsqu'ils sont dans un formulaire ou non (encadrés par la balise <form> ou non).
required
L'attribut required est utilisé pour interdire un champ vide.
<p>
<input required="required" />
</p>
Un espace rend le champ non vide ...
minlength et maxlength
L'attribut minlength impose un nombre minimum (inclus) de caractères.
L'attribut maxlength limite le nombre maximal (inclus) de caractères.
<p>
<input minlength="4" maxlength="8" />
</p>
Ces attributs minlength et maxlength ne sont autorisés qu'en présence d'un attribut type dont la valeur est : text, email, url, password, tel ou search (ou en l'absence de l'attribut type)
Malgré la contrainte minlength, on peut laisser la contrainte required afin que le champ paraisse invalide dès le chargement de la page.
number
L'attribut number est utilisé pour n'autoriser que des nombres ou un champ vide.
En l'absence de l'attribut step, seuls les nombres entiers seront autorisés (y compris les nombres entiers négatifs).
Certains navigateurs (Chrome et Opera) interdisent, en temps réel, la frappe de caractères alphabétiques. D'autres (Edge et Firefox) considèrent le champ comme invalide (mais autorisent les caractères alphabétiques.)
<p>
<label>Âge :
<input type="number" min="18" max="120" />
</label>
</p>
min et max
Lorsque le champ est de type="number" deux autres attributs sont disponibles
: min et max.
L'attribut min permet d'indiquer la valeur admise minimale
(incluse)
L'attribut max permet d'indiquer la valeur admise maximale (incluse)
<p>
<label>Âge :
<input type="number" min="18" max="120" />
</label>
</p>
Ces contraintes, min et max, s'appliquent aussi à des données de
type="date", ...
step
Lorsque le champ est de type="number" l'attribut step est
disponible et est utilisé pour définir l'écart autorisé entre deux nombres.
Ci-dessous, les nombres avec deux décimales sont autorisés (avec un point décimal, dans le code HTML), ainsi qu'une absence de nombre !
<p>
<input type="number" step="0.01" />
</p>
Dans le champ de type number :
- Chrome (73+) et Opera (58+) acceptent la virgule décimale ou le point décimal.
- EdgeHTML (17+) n'accepte que le point décimal.
- Firefox (66+) n'accepte que la virgule décimale.
Pour interdire l'absence de nombre, il faut ajouter la contrainte required.
Dans le script PHP, les données numériques seront modifiées. Le remplacement de la virgule par le point sera toujours effectué (pour tenir compte du cas où elle contient une virgule). Puis, elle sera vérifiée par les fonctions PHP : is_int(), is_numeric(), ...
Référence : https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/number
pattern
Lorsque le champ est de type="text" l'attribut pattern
permet d'autoriser une string formatée.
Pour le confort de l'utilisateur, l'attribut title aura la valeur de l'attribut pattern. De plus, la valeur de l'attribut placeholder donnera un exemple de valeur attendue.
Note :
L'élément
(Source). La
validation doit se faire via du JavaScript. Par exemple, en utilisant <textarea> ne prend pas en charge l'attribut
pattern.includes().
<p>
<label>N° GSM :
<input type="text" pattern="04[0-9]{2} [0-9]{2} [0-9]{2} [0-9]{2}"
placeholder="0499 01 23 45" title="04[0-9]{2} [0-9]{2} [0-9]{2} [0-9]{2}" />
</label>
</p>
Pour interdire une string vide, il faut ajouter la contrainte required.
La validation HTML s'opérant après le clic sur un bouton de type="submit",
pour avoir une vérification lors de la frappe, il faut donner un pattern aux
inputs de type="email" : pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
Les attributs maxlength, number, ... peuvent être alors inutiles.
Envoi des données
L'envoi des données requiert l'utilisation de la balise <form>
et,
-
soit un clic sur un bouton de
type="submit"(input ou button)
En l'absence d'un bouton detype="submit"dans le formulaire, le navigateur considérera la balise button sans type commetype="submit"
Pour éviter ce comportement, il faut indiquertype="button"Et enfin, des données valides (s'il existe des contraintes HTML)
La validation HTML (automatique) n'a lieu qu'après le clic sur un bouton detype="submit".En l'absence d'un bouton de
type="submit"(ou considéré comme tel par le navigateur), les données ne sont pas envoyées. L'envoi se fera alors via JS. -
soit un clic sur un bouton de
type="button"(button)La validation HTML n'aura lieu pas lieu car le bouton n'est pas de
type="submit".Le traitement de l'événement click (via JS), utilisera de la méthode submit() de l'objet form.
document.getElementById("form1").submit();L'envoi via JS rend possible l'affichage d'un aperçu dans une fenêtre modale disposant de deux boutons : "Annuler" et "Confirmer". Ainsi, après avoir rempli le formulaire, l'utilisateur peut, par exemple, avoir un aperçu du montant qu'il payera (dans le cas d'une commande, réservation, ...)
Toutefois, les données invalides seront envoyées, si elles ne sont pas traitées au niveau du JS.
Une validation JS (programmée) devrait être prévue, car elle n'est pas automatique.
Envoi des données dans les 2 cas (avec et sans JS activé) => En JS,
le bouton de type="submit" sera remplacé par un bouton de
type="bouton" qui traitera l'événement onclick.
Envoi des données que si JS est activé, il est alors normal de prévenir l'utilisateur, avant le formulaire, qu'il doit activer le JS de son navigateur pour envoyer les données.
<noscript>Veuillez activer le JavaScript de votre navigateur.</noscript>
avec <form>
Pour bénéficier de l'effacement de tous les champs et de la validation HTML faites par le
navigateur, les champs (<input />) doivent être encadrés par la
balise <form>.
Initialement, le formulaire est destiné à envoyer des données à un serveur. L'adresse du fichier devant traiter les données est alors indiquée dans son attribut action.
Si les données sont valides :
- En cas d'absence de l'attribut
actiondans la balise<form>, la page est réaffichée (et les données sont effacées du formulaire). - Et, si la valeur de l'attribut onsubmit est
return false;, les données ne sont pas envoyées au fichier indiqué par l'attribut action. - Les instructions JavaScript précédant l'instruction
return false;seront exécutées. Par exemple,alert('Données valides !');. Ouenvoyer(), une fonction JS qui appelle un fichier PHP (comme dans une application web)
Les données peuvent être vérifiées, dans l'ordre, :
- lors de la frappe
- lorsque le champ est quitté (en JS)
- lors de la soumission
La validation HTML a lieu lors de la frappe (maxlength) ou, avec les autres attributs, au début de la soumission
Sécurité. Toutes les validations (HTML et JS) faites coté-client doivent être refaites coté-serveur (dans le fichier devant traiter les données) - surtout lorsque ces données seront enregistrées dans une base de données - car les validations HTML et JS peuvent être contournées !
Lors de la soumission
La vérification des champs - faite par le navigateur, hors temps réel - se produit
après le clic sur le bouton de soumission
(type="submit") (et après le traitement de l'éventuel événement onclick de
ce bouton de soumission) et avant d'être traité par l'éventuel appel de la
fonction indiquée dans l'attribut onsubmit du formulaire.
Cette éventuelle fonction retournera true ou false. En l'absence de cette fonction, les
données sont envoyées (la valeur, par défaut, de onsubmit étant true)
Si la validation HTML échoue, le processus n'atteint pas l'événement submit.
Cette page ne traite que de la validation HTML. Sachez toutefois que, via du code JavaScript, il est possible de vérifier les données avant le clic sur le bouton de soumission.
Cette validation HTML utilise certains attributs de la balise <input
/> :
- required
- number
- step
- min
- max
- pattern
- url
- ...
Ces contraintes peuvent se cumuler.
L'attribut onsubmit permet de traiter l'événement submit. En son absence, les données sont directement envoyées au fichier indiqué par l'attribut action.