IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Contributions JavaScript / AJAX Discussion :

Les formulaires (partie 2) : Comment vérifier que l'utilisateur a renseigné tous les champs texte. . . [Fait] [FAQ]


Sujet :

Contributions JavaScript / AJAX

  1. #1
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 646
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 646
    Points : 11 135
    Points
    11 135
    Par défaut Les formulaires (partie 2) : Comment vérifier que l'utilisateur a renseigné tous les champs texte. . .
    Comment vérifier que l'utilisateur a renseigné tous les champs texte d'un formulaire ?
    http://javascript.developpez.com/faq...#verifTousTxts

    • syntaxe js vieillotte
    • & à la place de & dans le if
    • remplacement du for in par une boucle avec un compteur, le script ne fonctionnant pas sous FF
    • ajout d'un toLowerCase() sur le type car certains navigateurs écrivent le type en majuscules
    • ajout d'une remarque sur le textarea (qui est un champ texte lui aussi )
    • ajout d'une remarque sur le toLowerCase()


    Comment vérifier que l'utilisateur a renseigné tous les champs texte d'un formulaire ?

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
     
    var inputList = document.getElementById("idFormulaire").elements;
    var alertTxt = "";
    var n = inputList.length;
    var i;
     
    for (i=0; i<n; i++)
    {
        if (inputList[i].type.toLowerCase()=="text" && inputList[i].value.length==0)
        {
            alertTxt += "Le champ " + inputList[i].name + " n'a pas été rempli \n";
        }
    }
    alert(alertTxt);
    Le code ci-dessus peut être généralisé à d'autres types d'inputs (ex : checkbox, radio).
    Pour le textarea, la condition est différente car ce n'est pas une balise de type input. La condition portera donc sur l'attribut tagName :
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    if (inputList[i].tagName.toLowerCase()=="textarea" && inputList[i].value.length==0)

    Remarque :
    toLowerCase() est une instruction de l'objet String qui transforme les majuscules d'une chaîne de caractères en minuscules. Cela peut s'avérer nécessaire car certains navigateurs (dont IE pour l'attribut tagName) retournent une chaîne en majuscules. Cette transformation nous permet donc de s'affranchir de la façon dont un navigateur traite l'information contenue dans les attributs type et tagName
    Pour la remarque, je trouve que ma dernière phrase est assez mal tournée Si vous trouvez mieux, ça serait bien.

  2. #2
    Expert éminent sénior

    Avatar de vermine
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    6 582
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2008
    Messages : 6 582
    Points : 79 912
    Points
    79 912
    Par défaut
    La dernière phrase ne me parait mal torchée.

  3. #3
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 646
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 646
    Points : 11 135
    Points
    11 135
    Par défaut
    Citation Envoyé par vermine Voir le message
    La dernière phrase ne me parait mal torchée.
    C'est bien ce qu'il me semblait Je revoir ça

  4. #4
    Expert éminent sénior

    Avatar de vermine
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    6 582
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2008
    Messages : 6 582
    Points : 79 912
    Points
    79 912
    Par défaut
    "Pas mal torchée", pardon ! J'ai oublié un mot...

  5. #5
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 109
    Points
    44 109
    Par défaut Relecture
    toLowerCase() est une instruction de l'objet String qui transforme les majuscules d'une chaîne de caractères en minuscules.
    je verrais plutôt

    toLowerCase() est une méthode de l'objet String qui convertit les caractères alphabétiques d'une chaîne en minuscule.

  6. #6
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 646
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 646
    Points : 11 135
    Points
    11 135
    Par défaut
    Voici la Q/R mise à jour :

    Comment vérifier que l'utilisateur a renseigné tous les champs texte d'un formulaire ?


    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    var inputList = document.getElementById("idFormulaire").elements;
    var alertTxt = "";
    var n = inputList.length;
    var i;
     
    for (i=0; i<n; i++)
    {
        if (inputList[i].type.toLowerCase()=="text" && inputList[i].value.length==0)
        {
            alertTxt += "Le champ " + inputList[i].name + " n'a pas été rempli \n";
        }
    }
    alert(alertTxt);

    Le code ci-dessus peut être généralisé à d'autres types d'inputs (ex : checkbox, radio).
    Pour le textarea, la condition est différente car ce n'est pas une balise de type input. La condition portera donc sur l'attribut tagName:

    if (inputList[i].tagName.toLowerCase()=="textarea" && inputList[i].value.length==0)

    Remarque :
    toLowerCase() est une méthode de l'objet String qui convertit les caractères alphabétiques d'une chaîne en minuscules. Cela peut s'avérer nécessaire car certains navigateurs (dont IE pour l'attribut tagName) retournent une chaîne en majuscules. Cette transformation nous permet donc de s'affranchir de la façon dont un navigateur traite l'information contenue dans les attributs type et tagName.

  7. #7
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 109
    Points
    44 109
    Par défaut
    if (inputList[i].tagName.toLowerCase()=="textarea")
    perso j'utilise if (inputList[i].tagName === 'TEXTAREA'), le nom de la balise en majuscule et je n'ai jamais eu de soucis quelque soit le navigateur.
    Si l'on observe dans l'outil de développement ,nodeName et tagName se conjugue en MAJUSCULE.

  8. #8
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 646
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 646
    Points : 11 135
    Points
    11 135
    Par défaut
    Pour le tagName c'est donc normalisé ? Tout en majuscules ?

    Et pour le type ? Si mes souvenirs sont bons je crois que IE l'écrit en majuscules (ou seulement la première lettre) et FF en minuscules.

  9. #9
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 109
    Points
    44 109
    Par défaut
    Pour le type je viens de tester
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <input type="CHECKBOX" onclick="alert(this.type);">
    sur tous les navigateurs que j'ai le type retourné est en minuscule y compris IE7 IEI8.

  10. #10
    Expert éminent sénior

    Avatar de vermine
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    6 582
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2008
    Messages : 6 582
    Points : 79 912
    Points
    79 912
    Par défaut
    Je valide en majuscules alors ?

  11. #11
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 109
    Points
    44 109
    Par défaut
    Pour le tagName c'est donc normalisé ? Tout en majuscules ?
    la réponse est apportée par
    Citation Envoyé par Document Object Model Core
    The HTML DOM returns the tagName of an HTML element in the canonical uppercase form, regardless of the case in the source HTML document.
    dans ce cas j'indiquerais
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    if (inputList[i].tagName === 'TEXTAREA')
    en précisant que tagName retournant une chaine en majuscule il y a lieu de mettre le nom de la balise en majuscule.
    On peut même éventuellement mettre un lien http://www.w3.org/TR/2000/REC-DOM-Le...l#ID-104682815

  12. #12
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 646
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 646
    Points : 11 135
    Points
    11 135
    Par défaut
    Citation Envoyé par vermine Voir le message
    Je valide en majuscules alors ?
    on valide les majuscules.

    Voici donc la Q/R :
    Comment vérifier que l'utilisateur a renseigné tous les champs texte d'un formulaire ?

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
     
    var inputList = document.getElementById("idFormulaire").elements;
    var alertTxt = "";
    var n = inputList.length;
    var i;
     
    for (i=0; i<n; i++)
    {
        if (inputList[i].type.toLowerCase()=="text" && inputList[i].value.length==0)
        {
            alertTxt += "Le champ " + inputList[i].name + " n'a pas été rempli \n";
        }
    }
    alert(alertTxt);


    Le code ci-dessus peut être généralisé à d'autres types d'inputs(ex : checkbox, radio).
    Pour le textarea, la condition est différente car ce n'est pas une balise de type input. La condition portera donc sur l'attribut tagName :

    if (inputList[i].tagName=="TEXTAREA" && inputList[i].value.length==0)

    Remarques :
    • toLowerCase() est une méthode de l'objet String qui convertit les caractères alphabétiques d'une chaîne en minuscules. Cette transformation nous permet donc de s'affranchir de la façon dont un navigateur traite l'information contenue dans l'attribut type.
    • tagName retournera toujours une chaine en majuscules, il y a lieu de mettre le nom de la balise en majuscules.
      Lien http://www.w3.org/TR/DOM-Level-2-Cor...l#ID-104682815
    Pour tagName j'ai retrouvé la spécification dans ce lien :
    http://www.w3.org/TR/DOM-Level-3-Cor...l#ID-104682815
    Par contre, rien concernant le type, j'ai donc laisse le code tel quel.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [FAQ] Les formulaires (partie 2) : Comment n'autoriser que la saisie de chiffres dans un champ texte ?
    Par Auteur dans le forum Contributions JavaScript / AJAX
    Réponses: 4
    Dernier message: 18/11/2013, 22h34
  2. [FAQ] Les formulaires (partie 2) : Comment soumettre un formulaire automatiquement ?
    Par Auteur dans le forum Contributions JavaScript / AJAX
    Réponses: 4
    Dernier message: 18/11/2013, 22h33
  3. [FAQ] Les formulaires (partie 2) : Comment vérifier la syntaxe d'une date ?
    Par Auteur dans le forum Contributions JavaScript / AJAX
    Réponses: 4
    Dernier message: 18/11/2013, 22h30
  4. [FAQ] Les formulaires (partie 2) : Comment soumettre un formulaire en utilisant un lien ?
    Par Auteur dans le forum Contributions JavaScript / AJAX
    Réponses: 5
    Dernier message: 16/11/2013, 18h55
  5. comment verifier que l'utilisateur a renseigner tous les champ obligatoir d'un formulaire ?
    Par belaggoun2000 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 5
    Dernier message: 22/11/2010, 17h14

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo