Discussion :

[sebgac]

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.

[Watilin]

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 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

/^[\w\s-]{3,20}$/

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()

[sebgac]

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) ?

[Doksuri]

ajoute un event keyup sur ton input qui lance la function qui test la regexp

[sebgac]

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

[sebgac]

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

[Watilin]

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.

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.

[sebgac]

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');
            };

[Doksuri]

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)

[Watilin]

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.