Comment effectuer Basic JavaScript Validation - dummies

Vous pouvez effectuer une validation de base en utilisant JavaScript pour une variété de types d'entrée. Ce premier exercice configure le code HTML pour le formulaire Web. Une fois cet exercice terminé, une validation JavaScript sera effectuée pour un formulaire.

1. Ouvrez votre éditeur de texte et créez un nouveau fichier vide.

2. Dans le fichier, placez le code HTML suivant:

   Un formulaire Informations sur l'utilisateur Nom: * Nom requis 
   
   Ville: 
   État: Alabama Californie Colorado Floride Illinois New Jersey New York Wisconsin > Code postal: 
   Adresse e-mail: * E-mail est requis 
   Numéro de téléphone: Format: xxx-xxx-xxxx 
   Type de numéro: Work Home Veuillez choisir une option 
   Mot de passe: * Mot de passe requis 
   Vérifier le mot de passe: * Les mots de passe ne correspondent pas à 
   Enregistrez le fichier en tant que formulaire. php dans votre racine de document. 
   

3. localhost
4. / formulaire. php. Le HTML semble plutôt mauvais, avec des champs de formulaire mal alignés et des erreurs d'affichage. Vous pouvez corriger cela avec CSS.

   

   Créez un nouveau fichier texte dans votre éditeur et entrez le code CSS suivant:

5. formset {display: inline-block;}. radioButton {float: none; affichage: en ligne; marge-droite: 0. 1em; width: 2em;} label de forme {largeur: 8em; marge-droite: 1em; float: à gauche; text-align: droit; display: block;} entrée de formulaire {width: 15em;} #submit {margin-top: 2em; Flotter à droite;}. errorClass {background-color: # CC6666;} #errorDiv {col ou: rouge;}. errorFeedback {visibility: hidden;}

   Enregistrez le fichier en tant que formulaire. css dans la racine de votre document.
   

6. Ce fichier a déjà été référencé dans le code HTML que vous avez créé à l'étape 2, donc aucune autre modification n'est nécessaire pour ce fichier.

   Rechargez le formulaire. fichier php dans votre navigateur.

7. Avec le HTML et CSS en place, il est temps d'ajouter du JavaScript.

   

   Remarque: Vous construisez le code de validation plus loin dans ce chapitre. Pour l'instant, vous venez d'ajouter un fichier JavaScript de base.

   Créez un nouveau fichier texte dans votre éditeur.

8. Placez le code JavaScript suivant dans le fichier.

9. $ (document). ready (function () {alert ("bonjour");});

   Enregistrez le fichier en tant que formulaire. js dans la racine de votre document.
   

10. Recharger le formulaire. php dans votre navigateur Web.

11. Cliquez sur OK pour fermer la boîte de dialogue.

    

12. Bien que la boîte de dialogue d'alerte ne soit pas nouvelle, elle prouve que vous avez correctement connecté le code HTML et JavaScript pour cet exercice. À partir de là, vous pouvez travailler sur l'ajout de la validation JavaScript au formulaire. Avant de le faire, vous pouvez trouver utile de décomposer certains des HTML et CSS que vous avez créés.