Validation champ number et case à cocher

Version imprimable

25/06/2024, 11h42
cdevl37

1 pièce(s) jointe(s)

Validation champ number et case à cocher

Bonjour,

Je ne parviens pas à voir ou j'ai fais une erreur dans la validation pour le champs number et la case à cocher.

Avez vous une idée ?

https://codepen.io/aaashpnt-the-sans/pen/wvbyrRz

Pièce jointe 656470

Bonjour,

Code:

1
2
3
4
5
6
7
8
9
10
11
if (name.length < 3) {
     res.json({ 'alert': 'name must be 3 letters long' });
} else if (!email.length) {
     res.json({
            'alert': 'enter your email'
     });
} else if (password.length < 8) {
     res.json({ 'alert': 'password must be 8 letters long' });
} else if (!Number(number) || number.length < 10) {
     res.json({ 'alert': 'invalid number, please enter valid one' });
 }

Avec ce code, si par exemple les variables name et number sont invalides, seulement le bloc de name qui sera executé, car les instructions de else if sont successives.

La même chose pour cette partie de code aussi

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
if (fullname.value.length < 3) {
        showFormError('name must be 3 letters long');
    } else if (!email.value.length) {
        showFormError('enter your email');
    } else if (password.value.length < 8) {
        showFormError('password must be 8 letters long');
    } else if (!Number(number) || number.value.length < 10) {
        showFormError('invalid number, please enter valid one');
    } else if (!tac.checked) {
        showFormError('you must agree to our terms and condition');
    } else {
        // submit form
        loader.style.display = 'block';
        sendData('/signup', {
            name: fullname.value,
            email: email.value,
            password: password.value,
            number: number.value,
            tac: tac.checked
        })
    }

Utilisez seulement des if au lieu de else if

25/06/2024, 18h12
cdevl37

Super sa fonctionne, je ne dois pas avoir un else if partout ?
25/06/2024, 18h23
Toufik83

Bonjour,

Pour ce cas oui, vous devez utiliser seulement des if, car vous essayez de récupérer plusieurs erreurs à la fois, pas seulement une.
25/06/2024, 18h41
NoSmoking

Bonjour,

Citation:

Envoyé par cdevl37

Super sa fonctionne...

je serais curieux de voir cela car avec cette ligne appartenet à formBtn.addEventListener('click', () => { :

Code:

} else if (!Number(number) || number.value.length < 10) {

on entrera toujours dans la condition, en effet !Number(un_HTMLElement) sera invariablement à true.
25/06/2024, 18h44
cdevl37

en effet et quel est la solution ?
25/06/2024, 18h49
NoSmoking

La plus simple du monde, faire le test sur la valeur

Code:

} else if (!Number(number.value) || number.value.length < 10) {

car j'ai deux fichier ou je fais les testes, je dois le faire que dans le form.js ? ce test :

Code:

} else if (!Number(number.value) || number.value.length < 10) {

forms.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
// form validation
    if (fullname.value.length < 3) {
        showFormError('name must be 3 letters long');
    } if (!email.value.length) {
        showFormError('enter your email');
    } if (password.value.length < 8) {
        showFormError('password must be 8 letters long');
    } if (!Number(number) || number.value.length < 10) {
        showFormError('invalid number, please enter valid one');
    } if (!tac.checked) {
        showFormError('you must agree to our terms and condition');
    } else {

server.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
// form validation
    if (name.length < 3) {
        res.json({ 'alert': 'name must be 3 letters long' });
    } if (!email.length) {
        res.json({
            'alert': 'enter your email'
        });
    } if (password.length < 8) {
        res.json({ 'alert': 'password must be 8 letters long' });
    } if (!Number(number) || number.length < 10) {
        res.json({ 'alert': 'invalid number, please enter valid one' });
    } if (!tac) {
        res.json({ 'alert': 'you must agree to our terms and condition' });
    } else {

Citation:

car j'ai deux fichier ou je fais les testes, je dois le faire que dans le form.js ?

avec un minimum de réflexion je pense que tu aurais trouvé :aie:
dans ta partie serveur.js tu utilises directement les valeurs que tu révupères ici :

Code:

const { name, email, password, number, tac } = req.body;

dans ta partie form.js tu récupères les élément du DOM
Code:

1 2 3 4 5 6 7 formBtn.addEventListener('click', () => { let fullname = document.querySelector('#name'); let email = document.querySelector('#email'); let password = document.querySelector('#password'); let number = document.querySelector('#number'); let tac = document.querySelector('#tc'); // ....
il aurait été mieux d'avoir la même philosophie de traitement, à savoir à partir des valeurs, et d'écrire par exemle :
Code:

1 2 3 4 5 6 7 formBtn.addEventListener('click', () => { let fullname = document.querySelector('#name').value; let email = document.querySelector('#email').value; let password = document.querySelector('#password').value; let number = document.querySelector('#number').value; let tac = document.querySelector('#tc').checked; // ....

26/06/2024, 20h34
cdevl37

Merci a vous de votre aide.

J'ai enfin réussi, par contre j'ai un autre soucis avec un autre formulaire ou je ne parviens pas a trouver mon erreur, quand je clic sur "get you account" j'ai le loader qui tourne en boucle.

Avez vous une idée ?

https://codepen.io/aaashpnt-the-sans/pen/wvbyrRz

Citation:

Envoyé par cdevl37

J'ai enfin réussi, par contre j'ai un autre soucis ...

que dire si ce n'est :

https://www.developpez.com/template/kit/kitinfo.png Une discussion = une question

Poser plusieurs questions dans un seul et même fil nuit grandement à la qualité du forum : notamment, lors d'une recherche, tout le contenu du fil n'est pas indiqué dans le titre, elle devient donc plus ardue.

Notre but est de maintenir une base de connaissances facile à exploiter par tous les visiteurs, utilisable par tous. Vous avez pu bénéficier de ce forum en posant vos questions, laissez la possibilité aux suivants de bénéficier des réponses en leur offrant un sujet moins dispersé.