Vérifier un champ de formulaire avec espace

Version imprimable

Bonjour,

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

Voici le code :

Code:

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.

13/06/2019, 21h18
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:

/^[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:

/^[a-zA-Z0-9_\s-]{3,20}$/

D’ailleurs, [a-zA-Z0-9_] est équivalent à \w donc tu peux raccourcir le motif :

Code:

/^[\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() ;)
14/06/2019, 10h14
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) ?
14/06/2019, 10h40
Doksuri

ajoute un event keyup sur ton input qui lance la function qui test la regexp
14/06/2019, 11h30
sebgac

Citation:

Envoyé par Doksuri

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
14/06/2019, 11h45
sebgac

Citation:

Envoyé par Watilin

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
14/06/2019, 12h30
Watilin

Citation:

Envoyé par Doksuri

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

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.

merci pour ta réponse

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

Code:

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

14/06/2019, 15h13
Doksuri

Citation:

Envoyé par Watilin

:!: Plutôt keypress en l’occurence

https://developer.mozilla.org/en-US/...keypress_event

Citation:

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)
14/06/2019, 15h45
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.