L’utilisation principale de JavaScript dans la gestion des formulaires est la validation des données saisies par les utilisateurs. Avant d’envoyer un formulaire au serveur, il est recommandé de valider les données insérées par l’utilisateur via JavaScript. De cette manière, si l’utilisateur a fait une erreur lors du remplissage du formulaire, il peut être notifié instantanément, sans qu’il soit nécessaire d’attendre la réponse du serveur.
avertit les erreurs immédiatement à l’aide de JavaScript améliore l’utilisateur Satisfaction à l’égard de l’application (qui est techniquement appelée « Amélioration de l’expérience utilisateur ») et aide à réduire la charge de traitement sur le serveur.
Normalement, la validation d’une forme consiste à appeler à une fonction de validation lorsque le Utilisateur clique sur le bouton Envoyer le formulaire. Dans cette fonction, ils sont vérifiés si les valeurs entrées par l’utilisateur sont conformes aux restrictions imposées par l’application.
Bien qu’il y ait autant de vérifications possibles que des éléments de forme différents, certains contrôles sont très courants. : C’est un champ obligatoire, qui est sélectionné la valeur d’une liste déroulante, que l’adresse électronique indiquée est correcte, que la date introduite est logique, qu’un numéro est entré selon les besoins, etc.
Un code ci-dessous est le code JavaScript de base nécessaire pour incorporer la validation à un formulaire:
et le schéma de fonctions validacion() est comme suit:
Le fonctionnement de cette technique de validation est basé sur le comportement de L’événement onsubmit par JavaScript. Comme d’autres événements tels que onclick et onkeypress, l’événement 'onsubmit varie de votre comportement en fonction de la valeur qui est renvoyée.
Ainsi, si l’événement onsubmit renvoie la valeur true, le formulaire Envoyer Comment je ferais normalement. Toutefois, si l’événement onsubmit renvoie la valeur , le formulaire n’est pas envoyé. La clé de cette technique est de vérifier chacun des éléments de la forme. Dans quand il y a un élément incorrect, la valeur est renvoyée. Si aucune erreur n’est trouvée, la valeur true est renvoyée.
Par conséquent, l’événement IV ID = « 19026AD6C7 » est défini en premier lieu.
du formulaire comme:
Comme le code JavaScript renvoie la valeur résultante de la fonction validacion(), le formulaire ne sera envoyé que sur le serveur si cette fonction renvoie true. Dans le cas où la fonction validacion() renvoie , le formulaire restera intégré.
dans la fonction validacion() Toutes les conditions imposées par l’application sont vérifiées. Lorsqu’une condition n’est pas remplie, est renvoyé et le formulaire n’est donc pas envoyé. S’il est atteint à la fin de la fonction, toutes les conditions ont été remplies correctement, il est donc renvoyé true et le formulaire est envoyé.
La notification de Les erreurs engagées dépendent de la conception de chaque application. Dans le code de l’exemple précédent, les messages sont simplement affichés à l’aide de la fonction alert() indiquant l’erreur produite. Les meilleures applications Web conçues montrent chaque message d’erreur en regard de l’élément de formulaire correspondant et montrent également un message principal indiquant que le formulaire contient des erreurs.
une fois que le schéma de fonction est défini validacion(), le code correspondant à toutes les vérifications effectuées sur les éléments du formulaire doit être ajouté à cette fonction. Ensuite, certaines des validations les plus courantes des champs de formulaire sont indiquées.
7.3.1. Validez un champ de texte obligatoire
Il est sur le point de forcer l’utilisateur à entrer une valeur dans une carte texte ou texte dans laquelle il est obligatoire. La condition dans JavaScript peut être indiquée comme suit:
de sorte qu’un champ de texte obligatoire soit terminé, il est vérifié que la La valeur entrée est valide, que le nombre de caractères entré est supérieur à zéro et que seuls les espaces vides ont été entrés.
Le mot réservé null est une valeur spéciale qui est utilisé pour indiquer « aucune valeur ». Si la valeur d’une variable est null, la variable ne contient aucune valeur d’objet, matrice, chaîne numérique, texte ou booléen.
La deuxième partie de la condition nécessite que le texte introduit ait une longueur supérieure à zéro caractères, c’est-à-dire que ce n’est pas un texte vide.
Enfin, la troisième partie de la Condition (/^\s+$/.test(valor)) force La valeur entrée par l’utilisateur non seulement formée par des espaces vides. Ce chèque est basé sur l’utilisation de «expressions régulières», une ressource habituelle dans n’importe quel langage de programmation, mais qu’en raison de sa grande complexité, ils ne seront pas étudiés. Par conséquent, il est nécessaire de copier littéralement cette condition, en prenant des soins particuliers pour ne pas modifier aucun caractère de l’expression.
7.3.2. Validation d’un champ de texte avec des valeurs numériques
Il s’agit de lier l’utilisateur à entrer une valeur numérique dans une zone de texte. La condition JavaScript est composée de:
valor = document.getElementById("campo").value;if( isNaN(valor) ) { return false;}
si le contenu de la variable Ce n’est pas un nombre valide, la condition n’est pas remplie. L’avantage d’utiliser la fonction interne isNaN() est qu’il simplifie les chèques, car JavaScript est responsable de la prise en compte des décimales, des signes, etc.
ci-dessous Résultats de la fonction isNaN():
isNaN(3); // falseisNaN("3"); // falseisNaN(3.3545); // falseisNaN(32323.345); // falseisNaN(+23.2); // falseisNaN("-23.2"); // falseisNaN("23a"); // trueisNaN("23.43.54"); // true
7.3.3 sont affichés. Validez une option à partir d’une liste
est sélectionnée, il s’agit de lier l’utilisateur à sélectionner un élément dans une liste déroulante. Le code JavaScript suivant vous permet d’y parvenir:
indice = document.getElementById("opciones").selectedIndex;if( indice == null || indice == 0 ) { return false;}<select name="opciones"> <option value="">- Selecciona un valor -</option> <option value="1">Primer valor</option> <option value="2">Segundo valor</option> <option value="3">Tercer valor</option></select>
de la propriété selectedIndex, il est vérifié si l’index de l’option sélectionnée est valide et est également différent de zéro. La première option de la liste () n’est pas valide, la valeur est autorisée pour cette propriété selectedIndex.
7.3.4. Validez une adresse email
Il s’agit de lier l’utilisateur à entrer une adresse e-mail avec un format valide. Par conséquent, ce qui est vérifié, c’est que l’adresse semble valide, car elle n’est pas cochée s’il s’agit d’un compte de messagerie réel et opérationnel. La condition JavaScript consiste en:
valor = document.getElementById("campo").value;if( !(/\w+(\w+)*@\w+(\w+)*\.\w+(\w+)/.test(valor)) ) { return false;}
chèque est effectué à nouveau par des expressions régulières, car les adresses électroniques valides peuvent être très différentes. D’autre part, comme étant la norme qui définit le format des adresses électroniques est très complexe, l’expression régulière précédente est une simplification. Bien que cette règle valide la plupart des adresses électroniques utilisées par les utilisateurs, il ne prend pas en charge tous les différents formats de messagerie valides.
7.3.5. Valider une date
Les dates sont généralement les champs de formulaire les plus compliqués à valider par la multitude de façons différentes dans lesquelles elles peuvent être introduites. Le code suivant suppose que l’année a été obtenue d’une certaine manière, le mois et la journée introduits par l’utilisateur:
var ano = document.getElementById("ano").value;var mes = document.getElementById("mes").value;var dia = document.getElementById("dia").value;valor = new Date(ano, mes, dia);if( !isNaN(valor) ) { return false;}
La fonction Date(ano, mes, dia) est une fonction JavaScript interne qui vous permet de créer des dates de l’année, du mois et de la date de la date. Il est très important de garder à l’esprit que le numéro de mois est indiqué à partir de à , étant Le mois de janvier et mois de décembre. Les jours du mois suivent une numérotation différente, car le minimum autorisé est 1 et le maximum 31
La validation est d’essayer de créer une date avec les données fournies par l’utilisateur. Si les données utilisateur ne sont pas correctes, la date ne peut pas être construite correctement et la validation de formulaire ne sera donc pas correcte.
7.3.6. Validant un certain nombre de DNI
Il s’agit de vérifier que le nombre fourni par l’utilisateur correspond à un nombre valide de document d’identité national ou de DNI. Bien que pour chaque pays ou région, les exigences du document d’identité des personnes puisse varier, un exemple générique facilement adaptable est indiqué ci-dessous. La validation doit non seulement vérifier que le nombre est formé par huit figures et une lettre, mais il est également nécessaire de vérifier que la lettre indiquée est correcte pour le numéro introduit:
La première vérification garantit que le format du numéro introduit est correct, c’est-à-dire qu’il est formé par 8 numéros suivis et une lettre. Si la lettre est au début des chiffres, le chèque serait /^\d{8}$/. Si au lieu de huit chiffres et une lettre, dix chiffres et deux lettres sont nécessaires, le chèque serait /^\d{10}{2}$/ et ainsi de suite.
Le deuxième chèque applique l’algorithme de calcul de la lettre du DNI et la compare avec la lettre fournie par l’utilisateur. L’algorithme de chaque document d’identification est différent, la présente partie de la validation doit être adaptée commodément.
7.3.7. Validation d’un numéro de téléphone
Les numéros de téléphone peuvent être indiqués de différentes manières: avec le préfixe national, avec un préfixe international, regroupés par paires, séparant des numéros avec des scripts, etc.
Le script suivant considère qu’un numéro de téléphone est composé de neuf chiffres consécutifs et sans espaces ni scripts entre les figures:
encore une fois, l’état de JavaScript est basé sur l’utilisation d’expressions régulières, qui vérifient si la valeur indiquée est une succession de neuf chiffres consécutifs. Vous trouverez ci-dessous d’autres expressions régulières pouvant être utilisées pour d’autres formats de numéro de téléphone:
900900900 900-900-900 /^\d{3}-\d{3}-\d{3}$/ 900 900900 900 90 09 00 /^\d{3}\s\d{2}\s\d{2}\s\d{2}$/ (900) 900900 /^\+\d{2,3}\s\d{9}$/ + suivi de 2 ou 3 chiffres), espace vide et 9 figures consécutives 7.3.8. Valider qu’une case à cocher a été sélectionnée
si un élément de type à cocher doit être sélectionné, JavaScript vous permet de vérifier très facilement:
elemento = document.getElementById("campo");if( !elemento.checked ) { return false;}
S’il est de vérifier que toute la case à cocher du formulaire a été sélectionnée, il est plus facile d’utiliser une boucle:
formulario = document.getElementById("formulario");for(var i=0; i<formulario.elements.length; i++) { var elemento = formulario.elements; if(elemento.type == "checkbox") { if(!elemento.checked) { return false; } }}
7.3.9. Validez qu’un radiobutton a été sélectionné
Bien qu’il s’agisse d’un cas similaire à celui de la case à cocher, la validation du Radiobutton présente une différence importante: en général, la vérification effectuée est que l’utilisateur a sélectionné certains radiobutton de ceux qui forment un certain groupe. Utilisation de JavaScript, il est facile de déterminer si un groupe radiobutton a été sélectionné:
L’exemple précédent exécute tout le radiobutton qui Ils forment un groupe et vérifient l’élément par élément s’il a été sélectionné. Lorsque le premier radiobutton sélectionné est trouvé, il quitte la boucle et il est indiqué qu’au moins un ait été sélectionné.