Le but de ce tp est de faire le tour des éléments utiles à la création et à la validation des formulaires en incluant les nouveautés HTML5.

Rappels

Les nouveaux types de champs de saisie avec html5

Exercice 1: nouveaux types d'input

• Explorer le code de ce formulaire généré automatiquement et observer le fonctionnement des nouveaux types d'input en fonction des navigateurs (opéra, mozilla, chrome, etc).
• Simplifier le code de l'exemple pour obtenir un formulaire qui ressemble à celui-là avec quelques contraintes de sobriété: le code html ne doit pas dépasser 300 mots (soit ~100 lignes bien aérées) et la css ne doit pas dépasser 70 mots et contenir au maximum une dizaine de règles.

Exercice 2: nouveaux éléments

• Ajouter une autocomplétion lors de la saisie du pseudo en donnant la liste des pseudos déjà pris en utilisant l'élément datalist et l'attribut list.
• Ajouter le code javascript permettant de vérifier en fin de saisie du pseudo qu'il ne contient bien que des caractères alphanumériques et qu'il fait entre 3 et 10 caractères et qui affiche un message d'erreur explicite avec suggestion d'action si la saisie n'est pas valide.
• Modifier le feedback par défaut, côté client lors de la saisie pour l'améliorer à votre manière. En affichant un message d'erreur personnalisé et explicite avec suggestion d'action lorsque des erreurs sont détectées au fur et à mesure que les champs du formulaire sont saisis.
  NB: dans certains navigateurs le feedback par défaut est plus complet que d'autres.
  

Exercice 3: contrôler une saisie par les éternelles regexp

Rappels: le champs email est contrôlé par les regexp suivantes:

Any string that matches the following [ABNF] production:

1*( atext / "." ) "@" ldh-str 1*( "." ldh-str )

…where atext is as defined in [RFC 5322], and ldh-str is as defined in [RFC 1034].

That is, any string which matches the following regular expression:

/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/

• Ajouter un champs dans le formulaire pour saisir une référence client composée d'une séquence de taille variable de caractères et structurée ainsi: la référence commence par exactement 2 chiffres puis d'exactement 3 caractères, le caractère - et se termine par une suite de caractères et de chiffres excluant les caractères spéciaux. Ecrire le code javascript utile à la vérification de la validité de la forme de la référence saisie.