Discussion :

[cdevl37]

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

[Toufik83]

Bonjour,

Code :

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

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 :

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

[cdevl37]

Super sa fonctionne, je ne dois pas avoir un else if partout ?

[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.

[NoSmoking]

Bonjour,

Super sa fonctionne...

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

Code :

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

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

on entrera toujours dans la condition, en effet !Number(un_HTMLElement) sera invariablement à true.

[cdevl37]

en effet et quel est la solution ?

[NoSmoking]

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

Code :

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

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

[cdevl37]

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

Code :

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

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

forms.js

Code :

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

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 :

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

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 {

[NoSmoking]

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é
dans ta partie serveur.js tu utilises directement les valeurs que tu révupères ici :

Code :

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

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

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

Code :

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

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 :

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

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;
    // ....

[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

[NoSmoking]

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

que dire si ce n'est :

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é.