Problème posé

Ces quelques pages ne sont pas un cours complet sur Javascript. Il en existe plein sur Internet. Javascript, langage côté client, s'exécute dans le navigateur de l'internaute et sert essentiellement à la vérification de la saisie dans les formulaires car celle-ci ne s'effectue pas côté serveur.

Si le formulaire est saisi puis envoyé au serveur, celui-ci lors du traitement retournerait un message au client en cas d'erreur. Et s'il y avait plusieurs erreurs ou oublis consécutifs, cela pourrait engendrer des allées et venues entre le serveur et le client donc ralentir le processus, surcharger le serveur et engendrer du trafic réseau inutile. Les formulaires sont donc vérifiés sur place, localement (côté client), et ne sont transmis au serveur que s'il remplissent les conditions définies.

Lorsqu'on développe des pages les mêmes vérifications deviennent récurrentes. Il est donc utile de se constituer une bibliothèque d'outils plutôt que de devoir à chaque fois « réinventer la roue ». Ces pages sont un exemple de fonctions permettant de vérifier la plupart des formulaires. Elles pourront être reprises, quitte à les modifier ou à les compléter pour les adapter à vos besoins.

Le formulaire ci-dessous qui servira d'exemple (et que vous pouvez tester) contiendra ce qui revient le plus souvent : vérifier un nom/prénom, une date, une adresse mail, un numéro de téléphone. Les champs de saisie dont le fond est de couleur jaune pâle sont obligatoires. Les autres champs peuvent donc être vides mais si une information est saisie, elle devra avoir un format valide.

<form name="demo" method="post" action="<?php echo $_SERVER["PHP_SELF"]; ?>" onsubmit="return verif();">
Page web   code HTML   Longueurs ; caractères autorisés
Nom:
  <input type="text" name="nom" size="20">   min: 2, max: 20 ; lettres + espaces + '-
Prénom:
  <input type="text" name="prenom" size="20">   min: 2, max: 20 ; lettres + espaces + '-
Date de naissance:
  <input type="text" name="dnais" size="10">   longeur fixée par défaut à 10 ; chiffres + /.-
Adresse:
  <input type="text" name="adr" size="30">   min: 5, max: 30 ; lettres + espaces + '-,
Code postal:
  <input type="text" name="cp" size="5">   min: 5, max: 5 ; chiffres
Ville:
  <input type="text" name="ville" size="20">   min: 2, max: 20 ; lettres + espaces + '-
Téléphone:
  <input type="text" name="tel" size="15">   min: 10, max: 21 ; chiffres + espaces + .-+()
Adresse mail:
  <input type="text" name="mail" size="30">   min: 6, max: 40 ; ascii + chiffres + @_.-
  <input type="submit" name="submit" value="Envoyer">
</form>

 

 

Mise à jour le 15/06/2017 à 16:35:17