Comment fournir une rétroaction aux utilisateurs du formulaire Web

La tendance générale pour les commentaires sur un formulaire web sera de mettre en évidence le domaine qui nécessite une attention et d'activer la messagerie pour le domaine individuel et la forme générale.

Pour faciliter la rétroaction, créer deux nouvelles fonctions Form.js.

1. Ouvert Form.js dans votre éditeur, si elle est pas déjà ouvert.

2. À l'intérieur de Form.js, ajouter les fonctions suivantes, après la valideFormulaire fonction:

   fonction provideFeedback (incomingErrors) {for (var i = 0 à i lt; incomingErrors.length- i ++) {$ ("#" + incomingErrors [i]) addClass ("ErrorClass") -. $ ("#" + incomingErrors [i] + "Erreur") removeClass ("errorFeedback") -.} $ ("# errorDiv") html ("Les erreurs rencontrées") -.} function removeFeedback () {$ ("# errorDiv") html ("") -.. $ ('input') chaque fonction (() {$ (cette) .removeClass ("ErrorClass") -}) - $ (. '. errorSpan') chaque fonction (() {$ (this) .addClass ("errorFeedback") -}) -}

3. Avec ces fonctions dans le fichier, vous devez prochain à les appeler.

   L'appel à la removeFeedback fonction est ajoutée tout de suite au sein de la soumettre gestionnaire de sorte que la rétroaction d'erreur est effacé lorsque le formulaire est soumis. Cet appel ressemble à ceci:

   
   
   
   
   

   removeFeedback () -

   La fournir une réponse fonction doit être ajoutée dans la condition de présenter d'autre dans le gestionnaire de la forme et ressemble à ceci:

   provideFeedback (erreurs) -

   La soumettre gestionnaire devrait maintenant ressembler à ceci:

    $ ("# formUtilisateur") soumettre (function (e) {removeFeedback () -. erreurs var = valideFormulaire () - if (erreurs == "") {return vrai-} else {provideFeedback (erreurs) -e.preventDefault ( ): permet de revenir fausse -}}) -

4. Enregistrez le fichier (comme Form.js) Au sein de votre document root.

   À ce stade, l'ensemble du dossier devrait être composé de ceci:

   $ (document) .ready (function () {$ ("# formUtilisateur") soumettre (function (e) {removeFeedback () -. erreurs var = valideFormulaire () - if (erreurs == "") {return vrai-} else {provideFeedback (erreurs) -e.preventDefault () - return false -}}) - fonction valideFormulaire () {var errorFields = new Array () - // vérifie champs obligatoires ont quelque chose en themif ($ ('# nom') .val () == "") {errorFields.push ('nom') -} if ($ ('# email') val () ==. "") {errorFields.push ('email') -} if ($ ('# password1') val () == ""). {errorFields.push ('de password1') -} return errorFields-} // fonction fin validateFormfunction provideFeedback (incomingErrors) {for (var i = 0 à i lt; incomingErrors.length- i ++) {$ ("#" + incomingErrors [i]) addClass ("ErrorClass") -. $ ("#" + incomingErrors [i] + "Erreur") removeClass ("errorFeedback") -.} $ ("# errorDiv") html ("Les erreurs rencontrées") -.} function removeFeedback () {$ ("# errorDiv") html ("") -.. $ ('input') chaque fonction (() {$ (cette) .removeClass ("ErrorClass") -}) - $ (. '. errorSpan') chaque fonction (() {$ (this) .addClass ("errorFeedback") -}) -}}) -

5. Recharger form.php dans votre navigateur.

6. Désactivez toutes les informations dans les champs, le cas échéant a été sauvé par votre navigateur.

7. Dans les champs vides dans le formulaire, cliquez sur Soumettre la requête.

   

8. Remplissez le champ Nom et cliquez sur Soumettre la requête.

   Les commentaires indiquant qu'il y avait une erreur dans le champ Nom devrait dégager, mais les autres restera.

   

9. Remplissez les détails dans l'adresse et le mot de passe des champs E-mail et cliquez sur Soumettre la requête.

   Le formulaire doit présenter, en donnant à nouveau une page introuvable ou erreur semblable.