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

JavaScript Discussion :

Vérifier un champ de formulaire avec espace [RegExp]


Sujet :

JavaScript

  1. #1
    Membre à l'essai
    Homme Profil pro
    Intégrateur Web
    Inscrit en
    mai 2019
    Messages
    39
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Intégrateur Web

    Informations forums :
    Inscription : mai 2019
    Messages : 39
    Points : 16
    Points
    16
    Par défaut Vérifier un champ de formulaire avec espace
    Bonjour,

    Je recherche à vérifier si le modèle d'un champ de formulaire.

    Voici le code :

    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
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
     
            $("#submit").click(function () {
     
                //definition des variables et vérification des champs du formulaire
     
                var name = $("input#name").val();
                var regexName = /^[a-zA-Z0-9_-]{3,20}$/;
                var verifName = regexName.test(name);
                if ((name == "") || (verifName == false)) {
                    $("input#name").css('border-color', 'red');
                    $("input#name").focus();
                    return false;
                } else {
                    $("input#name").css('border-color', '#343434');
                };
                var mail = $("input#mail").val();
                var regexEmail = /^[a-zA-Z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/;
                var verifEmail = regexEmail.test(mail);
                if ((mail == "") || (verifEmail == false)) {
                    $("input#name").css('border-color', 'red');
                    $("input#mail").focus();
                    return false;
                } else if (verifEmail) {
                    $("input#name").css('border-color', '#343434');
                };
                var website = $("input#website").val();
     
                // TODO: verification pour website
     
                var msg = $("textarea#msg").val();
                if (msg == "") {
                    $("input#name").css('border-color', 'red');
                    $("input#msg").focus();
                    return false;
                } else {
                    $("input#name").css('border-color', '#343434');
                };

    1. Comment faire pour que un ou plusieurs espace puissent etre inclus et vérifié comme true dans le pattern var regexName = /^[a-zA-Z0-9_-]{3,20}$/;
    2. Avez-vous un pattern pour la vérification d'un website ?

    Merci d'avance pour votre aide.

  2. #2
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    juin 2010
    Messages
    3 021
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 31
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : juin 2010
    Messages : 3 021
    Points : 6 547
    Points
    6 547
    Par défaut
    1. Si tu veux autoriser les espaces et les compter dans le nombre total de caractères, c’est simple, ajoute-le dans la classe [] :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    /^[a-zA-Z0-9_ -]{3,20}$/
    Tu peux aussi utiliser la pseudo-classe \s, mais ça autorisera aussi les tabulations et les sauts de ligne :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    /^[a-zA-Z0-9_\s-]{3,20}$/
    D’ailleurs, [a-zA-Z0-9_] est équivalent à \w donc tu peux raccourcir le motif :
    Maintenant, si tu veux autoriser les espaces mais sans les compter, je pense que ça devient trop compliqué avec seulement une regex. Je propose de retirer les espaces dans un premier temps, puis de valider avec la regexp.

    2. Regarde URL()
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  3. #3
    Membre à l'essai
    Homme Profil pro
    Intégrateur Web
    Inscrit en
    mai 2019
    Messages
    39
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Intégrateur Web

    Informations forums :
    Inscription : mai 2019
    Messages : 39
    Points : 16
    Points
    16
    Par défaut
    Ok, merci pour les tuyaux

    J'ai une autre question, comment vérifier en direct live si les variables correspondent bien au regex ? Je voudrais colorier les champs en rouge tant que les variables entrées ne correspondent par à la regex (ou colorier en vert quand c'est ok, à voir) ?

  4. #4
    Membre expert
    Avatar de Doksuri
    Profil pro
    Développeur Web
    Inscrit en
    juin 2006
    Messages
    1 794
    Détails du profil
    Informations personnelles :
    Âge : 49
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : juin 2006
    Messages : 1 794
    Points : 3 020
    Points
    3 020
    Par défaut
    ajoute un event keyup sur ton input qui lance la function qui test la regexp
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

  5. #5
    Membre à l'essai
    Homme Profil pro
    Intégrateur Web
    Inscrit en
    mai 2019
    Messages
    39
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Intégrateur Web

    Informations forums :
    Inscription : mai 2019
    Messages : 39
    Points : 16
    Points
    16
    Par défaut
    Citation Envoyé par Doksuri Voir le message
    ajoute un event keyup sur ton input qui lance la function qui test la regexp
    super, merci, c cool la gestion des événements du clavier, je vais pouvoir m'amuser

  6. #6
    Membre à l'essai
    Homme Profil pro
    Intégrateur Web
    Inscrit en
    mai 2019
    Messages
    39
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Intégrateur Web

    Informations forums :
    Inscription : mai 2019
    Messages : 39
    Points : 16
    Points
    16
    Par défaut
    Citation Envoyé par Watilin Voir le message
    2. Regarde URL()
    Je vois pas trop comment l'utiliser. J'ai trouvé un truc en ajax mais pareil j'arrive pas à le mettre en oeuvre

    https://stackoverflow.com/questions/...ing-javascript

  7. #7
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    juin 2010
    Messages
    3 021
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 31
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : juin 2010
    Messages : 3 021
    Points : 6 547
    Points
    6 547
    Par défaut
    Citation Envoyé par Doksuri Voir le message
    ajoute un event keyup sur ton input qui lance la function qui test la regexp
    Plutôt keypress en l’occurence, car on cherche à connaître le caractère saisi, et pas le code de la touche pressée. Plus j’y pense et plus je me dis que cette distinction n’a pas de sens, mais c’est comme ça.

    Citation Envoyé par sebgac Voir le message
    Je vois pas trop comment l'utiliser. J'ai trouvé un truc en ajax mais pareil j'arrive pas à le mettre en oeuvre

    https://stackoverflow.com/questions/...ing-javascript
    Ta question était vague et j’ai supposé que tu cherchais simplement à vérifier qu’une chaîne est une URL valide, peu importe si quelque chose existe à cette adresse ou non. L’outil URL est pratique car il permet d’isoler le domaine, numéro de port, chemin, paramètres, etc. Par contre, si l’URL n’est pas valide, il émettra une erreur, il faut donc utiliser try / catch. Ça aurait été pratique qu’il y ait une fonction isValidURL ou un truc comme ça, mais je n’ai pas l’impression que ça existe.

    En revanche, si tu cherches à vérifier qu’une adresse existe, alors il faut faire une requête à cette adresse. C’est difficile de le faire de manière fiable avec ajax en raison de la politique de même origine. Comme expliqué sur le lien que tu as trouvé, il faut passer par un proxy – qui peut être un simple script sur ton propre serveur, utilisant cURL par exemple. Pas besoin d’utiliser les services d’un GAFAM.
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  8. #8
    Membre à l'essai
    Homme Profil pro
    Intégrateur Web
    Inscrit en
    mai 2019
    Messages
    39
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Intégrateur Web

    Informations forums :
    Inscription : mai 2019
    Messages : 39
    Points : 16
    Points
    16
    Par défaut
    merci pour ta réponse

    pour la vérification je suis en train de faire un truc du genre

    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
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
     
    var regexWebsite = new RegExp("^((http|https):\/\/)?(www[.])?([a-zA-Z0-9]|-)+([.][a-zA-Z0-9(-|\/|=|?)?]+)+$");
     
    $("input#website").keyup(function () {
     
                var website = $("input#website").val();
                var verifWebsite = regexWebsite.test(website);
     
                if (verifWebsite == false) {
                    $(this).css('color', 'red');
                } else {
                    $(this).css('color', 'white');
                };
            });
     
    $("#submit").click(function () {
     
                var website = $("input#website").val();
                alert (website);
                var verifWebsite = regexWebsite.test(website);
                if (verifWebsite == false) {
                    $("input#website").css('color', 'red');
                    $("input#website").focus();
                    return false;
                } else if (verifEmail) {
                    $("input#website").css('color', '#343434');
                };

  9. #9
    Membre expert
    Avatar de Doksuri
    Profil pro
    Développeur Web
    Inscrit en
    juin 2006
    Messages
    1 794
    Détails du profil
    Informations personnelles :
    Âge : 49
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : juin 2006
    Messages : 1 794
    Points : 3 020
    Points
    3 020
    Par défaut
    Citation Envoyé par Watilin Voir le message
    Plutôt keypress en l’occurence
    https://developer.mozilla.org/en-US/...keypress_event
    This feature is no longer recommended.
    Since this event has been deprecated, you should look to use beforeinput or keydown instead.
    apres, j'ai une preference pour le keyup plutot que le keydown, si l'utilisateur reste appuye sur la touche, quand il relache, on peut analyser toute la string (avec la repetition potentielle de lettre)
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

  10. #10
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    juin 2010
    Messages
    3 021
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 31
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : juin 2010
    Messages : 3 021
    Points : 6 547
    Points
    6 547
    Par défaut
    Ok, j’aurai appris un truc aujourd’hui. Du coup "keyup" porte l’information de la touche matérielle dans sa propriété .code (américano-centrée, malheureusement), et l’information du caractère saisi dans .key. C’est plus cohérent.
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

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

Discussions similaires

  1. [WD18] Utilisation d'une requête pour impression d'un état sur formulaire
    Par Blacksheep1 dans le forum WinDev
    Réponses: 5
    Dernier message: 19/09/2014, 09h51
  2. [MySQL] je cherche une aide pour récupérer des champs d'une base de donnée
    Par maya24 dans le forum PHP & Base de données
    Réponses: 2
    Dernier message: 23/09/2007, 13h14
  3. Réponses: 1
    Dernier message: 21/05/2007, 17h14
  4. Réponses: 14
    Dernier message: 01/05/2007, 20h25
  5. Réponses: 16
    Dernier message: 06/04/2007, 14h36

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