Premiers pas en JavaScript
validation formulaire
cuy copyleft
  See You Why?  

 


test relatif à l'accès aux éléments d'un formulaire (37.9) | | ?? (38.2)

Contenu

 

 

I. Valider les entrées d'un formulaire

Les pages en français traitant du sujet sont nombreuses sur le Web : Google en ce début 2013 nous en propose près de 50 000. Rares sont celles qui répondent valablement à ce que des créateurs de sites voudraient obtenir. Vérifier qu'un formulaire soit bien rempli est un problème classique en JS. Mais n'oubliez pas que chacun peut désactiver le JS et que votre script de vérification peut ne pas être fiable.

Cependant, JS garde de nombreux avantages dans la pré-vérification de vos formulaires, en effet:

  1. on reste sur la même page du formulaire :
    ça évite des redirections, et donc les temps de chargements qui vont avec (qui peuvent être longs si le serveur est saturé) ;
  2. si vous avez oublié de remplir un seul champ, pas de risque d'être redirigé sur un nouveau formulaire vide
    (c'est très agaçant, surtout si on a passé beaucoup de temps à le remplir) ;
  3. l'utilisateur peut être prévenu qu'un champ est mal rempli dès qu'il a fini de remplir ce formulaire, même avant.

Avant de valider les entrées d'un formulaire, nous renverrons le lecteur à la construction de formulaire que nous avons développée dans notre page HTML. Cependant, nous ne croyons pas que cette page puisse vous expliquer toutes les nuances de la création d'un bon formulaire. Nous rappellerons donc l'essentiel des formulaires.

Avant de vouloir valider chaque entrée d'un formulaire, le lecteur aura dû prendre connaissance de la façon d'accéder et/ou modifier chaque élément d'un formulaire, ce qui a été fait dans le chapitre précédent. Si cela ne présente plus aucun problème, libre à vous de poursuivre la lecture de ce chapitre.

 

A. rappel de l'essentiel des formulaires

Sans forcer le lecteur à lire ou relire les pages mentionnées ci-dessus, nous préférons rappeler, ici l'essentiel concernant les formulaires :

      1. un formulaire doit être encadré par des balises <form> et </form>, la première pouvant être accompagnée des paramètres action, method et name dont le sens est rappelé dans les pages recommandées ;
      2. un formulaire contient généralement une ou plusieurs entrées possibles, appelées champs de saisie via des balises <input>, <textarea> ou <select> avec <option> ;
      3. au moins un bouton de type <input type="submit" /> qui valide le formulaire et, facultativement un bouton de type <input type="submit" /> qui annule et remet à zéro les réponses entrées dans le formulaire ;
      4. parfois, un script en JS va vérifier le contenu des réponses données par l'utilisateur avant l'envoi vers le serveur en vue d'une analyse plus complète ou d'un enregistrement de ces données.

      Ce qui nous intéressera, c'est le contenu de ce fichier JS qui vérifie les réponses données.

       

B. Imprécisions, risques et/ou erreurs fréquentes

Notre but n'est pas de critiquer ce que vous faites, mais d'attirer votre attention sur les conséquences de certains choix faits par les concepteurs de pages ou d'habitudes prises par certains internautes.

 

1.- sortir d'un formulaire par "onclick" sur un bouton "ok" ou "Envoyer"

"En bien quoi ? C'est bien ce que l'on nous a appris en HTML."
Certes, vous n'avez pas tort. Les fans de l'ordi sont souvent aussi des fanatiques de la souris. Mais il ne faut pas oublier que les utlisateurs acharnés du clavier sont également très nombreux (j'en fais partie). Tous les employeurs et ergonomes le savent : les acharnés du clavier sont plus productifs, car ils ne perdent pas à chaque opération les secondes pour lâcher son clavier et retrouver sa souris (sur sa table de travail et sur son écran) ou vice-versa.

"Pas de problèmes... les inconditionnels du clavier savent tous que l'on peut passer d'un champ de formulaire à un autre en appuyant sur la touche 'TAB' et 'Enter' pour simuler un 'clic' sur un bouton."
Exact, mais tous les navigateurs n'acceptent pas ce détour de la même façon qu'un 'clic' sur le bouton... donc pas de réponse à l'évènement 'onclick'... donc pas de vérification si l'on a créé un bouton ainsi <input type="submit" value="OK" onclick="verifier()" />.

Outre ce bouton 'OK', on trouve aussi des variantes trop nombreuses, mais qui présentent les mêmes inconvénients :
<script type="text/javascript">
function verifier() {
    // si la valeur du champ 'nom de famille' n'est pas vide
    if(document.formSaisie.nom.value != "") {
        // alors on envoie le formulaire
        document.formSaisie.submit();
    } else {
        // sinon on affiche un message
        alert("Saisissez le nom de famille");
    }
}
</script>

ou encore via un bouton-image <img src="ok.jpg" onclick="verifier()" alt="ok" /> ou même un simple lien <a href="../verification_formul#" onclick="verifier()">Ok</a> voire aussi <a href="javascript:verifier()">Ok</a> ou <a href="javascript:verifier()"><img src="ok.jpg" alt="ok" /></a>.

En bref, évitez de sortir d'un formulaire par une instruction de type 'onclick'.

 

2.- nommer un formulaire par "name" ou par "id"

Même si les navigateurs acceptent encore la désignation d'un formulaire par l'attribut 'name', ce dernier est devenu obsolète depuis l'apparition de la norme HTML5. On préfèrera (avant d'y être bientôt obligé) l'emploi de l'attribut 'id' pour désigner ou identifier un formulaire.
Pour l'instant, si on emploie les deux attributs et si leurs noms diffèrent, c'est l'attribut 'id' qui sera pris en considération.

 

 

II.

voir suite >>>

 

 

IX. Test relatif à la validation de formulaire

voir suite >>>

 

 


test relatif à l'accès aux éléments d'un formulaire (37.9) | | ?? (38.2)

 

 

Merci de votre visite à partir de :

Vous êtes sur :
https://cuy.be/cours/jvs/jvs_380_validation_formulaire.html

partager sur FaceBook...           consulter sur FaceBook...

 

copyleft
Des liens ne fonctionnent plus ?
Avez-vous des suggestions ?
des commentaires, des corrections, un encouragement... ?
Pour info : Non, il n'y a pas de version papier ou DOC, PDF, etc. de ces notes.


Envoyez-moi un E-Mail (cuy(point)w(at)skynet(point)be)

Attention (at) signifie @ et (point) signifie .

Accueil CUY = See you why?

Compteur gratuitEasyCounter     BelStat Monitored by BelStat - Your Site Counts
La 1 000 000e page a été visitée le 21 mai 2010.
La 2 000 000e page a été visitée ce 18 mars 2012, vers midi.
La 3 000 000e page a été visitée ce 7 janvier 2014 entre 18 h et 18 h 45,
La 4 000 000e page a été visitée ce 5 juin 2015 entre 15 h 49 et 15 h 52,
La 5 000 000e page a été visitée ce 29 aout 2017 après 23 h 30,
Et la 6 000 000e page visitée, trop tôt pour y penser ?
 
et, d'après BelStat, CUY est visité surtout en semaine, peu le weekend...
moins et irrégulièrement pendant les vacances :

visites sur 3 mois, de la mi octobre 2013 à la mi janvier 2014.
 
La 3 333 333e page visitée a eu lieu ce mardi 10 juin 2014, en début d'après midi...
La 3 666 666e page visitée a eu lieu ce dimanche 28 decembre 2014, vers 16 h...
Un tiers de million de pages visitées en 154 jours cela fait une moyenne de 2165 pages visitées par jour...
Deux tiers de million de pages visitées en 355 jours soit une moyenne de 1878 pages visitées par jour...
et seulement 1195 pages visitées quotidiennement pendant les vacances estivales
de la mi juin à la mi septembre 2014

Vous voulez lire quelques messages reçus ?
quelques encouragements ?
Cliquez ici


Fin septembre 2009, installation de ce compteur
qui ne compte chaque nouvel ordinateur visiteur qu'une seule fois
free counter
 
m-à-j du 22/11/2021 :

Depuis cette fin septembre 2009, parmi les 210 pays (sur 274 drapeaux connus) qui nous ont visité,
voici les 100 pays qui nous visitent le plus, 
Nos petits visiteurs, classés par date de visite, où un seul ordi nous a visité, sont :
199. Turkmenistan (TM May 10, 2017) ; 200. Lesotho (LS March 1, 2017) ;
201. Turks and Caicos Island (TC January 18, 2016
202. Cook Islands (CK September 19, 2015)  203. Faroe Islands (FO January 27, 2015
204. Virgin Islands American (VI November 12, 2014) ;
205. Belize (BZ September 29, 2014) ;206. Eswatini - Swaziland (SZ July 21, 2014) ;
207. Grenada (GD April 3, 2014) ; 208. Timor-Leste (TI March 29, 2014) ;
209. American Samoa (AS December 26, 2012) ; 210. Guyana (GY November 5, 2010).