Vérification de saisie dans un formulaire

J'ai fait mon formulaire et je veux empêcher l'envoie de mon formulaire si par exemple l'utilisateur entre du texte à la place d'un numéro de téléphone.

//Voici mon formulaire

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<form action="" method="post"> <table> <tr> <td><input type="tel" name="tel" required /></td> <td>*Telephone</td> </tr> <tr> <td> <input type="text" name="name" required /></td> <td>*Nom et Prenom</td> </tr> <tr> <td><input type="text" name="pseudo" required /></td> <td>*Pseudo</td> </tr> <tr> <td> <input type="password" name="pwd" required /></td> <td>*Mot de passe </td> </tr> <tr> <td> <input id="create" type="submit" value="Creer le compte" id="button" onclick="check(this.form)" /></td> </tr> </table> </form>

---

//Voici mon script

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<script>   function check(form) { var create = document.getElementById('create'); if(typeof(form.tel.value)!=number){ create.disabled = true; alert("Le numero de telephone doit etre compose de chiffres"); } else { create.disabled = false; } } </script>

---

//Je veux bloquer le submit si l'utilisateur saisie du texte pour le numéro de telephone

Pour ma part j'aurai mis un gestionnaire onchange dans l'input

Code:

---

<input type="tel" name="tel" required onchange="numerique(this.value);"/>

---

renvoyant sur une fonction du style:

Code:

---

1 2 3 4 5 6

function numerique(valeur) if(isNaN(valeur) === true) { alert('valeur n\'est pas un nombre'); }

---

Salut,

tu as deux petits problèmes. Le premier, c’est que tu ne peux pas annuler la soumission du formulaire en désactivant le bouton submit. Au moment où tu es dans la fonction check c’est trop tard, le clic est déjà pris en compte. À la place, tu dois annuler l’évènement submit directement. Tu as deux façons de faire ça.

:arrow: La première façon de faire, c’est avec un attribut HTML onsubmit. L’attribut doit être équivalent à une instruction return false. Pour plus de souplesse, il est commun de placer le return false dans la fonction, et de retourner le résultat de la fonction.

Code:

---

1 2 3

<form action="" method="post" onsubmit="return check(this)"> ... </form>

---

Code:

---

1 2 3 4 5 6

function check(form) { if (/* test valeur : je vais parler de ça après */) { alert("Le numéro de téléphone doit être composé de chiffres"); return false; } }

---

:arrow: La seconde façon de faire, c’est avec un gestionnaire d’évènement. On l’ajoute avec addEventListener. La syntaxe est plus verbeuse mais ça a l’avantage de séparer proprement les codes HTML et JavaScript.

Code:

---

1 2 3

<form action="" method="post" id="leForm"> ... </form>

---

Code:

---

1 2 3 4 5 6 7

document.getElementById("leForm").addEventListener("submit", function (event) { if (/* test valeur */) { alert("Le numéro de téléphone doit être composé de chiffres"); event.preventDefault(); } });

---

Ici, plus besoin de return car il n’y a pas d’attribut HTML auquel envoyer une valeur. À la place, on reçoit l’objet event en paramètre, et on appelle sa méthode preventDefault.

Ton second problème, c’est une confusion de types. typeof renvoie toujours une chaîne, donc tu dois comparer à "number" (avec les guillemets). Mais plus important, la propriété value des champs de formulaires est toujours de type string, donc vérifier son type ne mène à rien.

Tu dois être plus astucieux et vérifier que la valeur se convertit correctement en nombre, par exemple avec isNaN comme le suggère MelkInarian. Autrement tu peux utiliser une expression rationnelle (regexp), et là je ne vais pas m’étaler sur le sujet, les tutos sont légion.

Merci Watilin pour l'explication c'est plus clair maintenant.
Merci a toi aussi MelkInarian!