Controle saisie téléphone + mail + date etc

**bricoreur** · 28/02/2018, 23h33

Bonjour,

Comme vous constaterez, je suis débutant dans la programmation. Après de très nombreuses lectures, j'ai trouvé ces codes que j'essaye de comprendre et d'appliquer mais soit il ne marche pas soit il ne fait pas exactement ce que je recherche.

j'aimerai avoir des contrôles sur la saisie de champs dans un formulaire.
Si bonne saisie = rien ne se passe et je continue à renseigner les autres champs
si mauvaise saisie = alors message d'erreur de saisie et je reste sur le même champ

J'ai souvent trouvé des explications avec onclick mais il m'a semblé mieux d'utiliser onblur pour ne pas multiplier les boutons.
Il me semble qu'avec les RegExp je pouvais trouver ce que je voulais (en apprenant à mieux les utiliser). j'ai aussi tenté avec des patterns mais les scripts me semblent meilleurs.

Sur ce code, il me revient toujours "Erreur", je ne sais pas où corriger mes erreurs. :

Code HTML :

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
<!DOCTYPE html>
<html>
<head>
	<title> CONTROLE TELEPHONE </title>
</head>
<body>
 
<form>
 
	<p> Saisissez un numéro : <input type="tel" name="tel_pers" onblur="verifTel(this.form)"> </p>
 
	<p>Ville : <input type="text" name="ville" id="ville"> </p>
 
<script type="text/javascript">
 
        function verifTel(formulaire) 
        {
          var Telephone=new RegExp("^(\d{2})-(\d{2})-(\d{2})-(\d{2})-(\d{2})$");
 
          if (Telephone.test(verifTel))
          {
            alert("VALIDE"); 
          } 
          else 
          {
            alert("ERREUR!"); 
          }
        }
 
</script>
 
</form>
 
</body>
</html>

Sur ce second control : c'est le format du mail qui est limité car il ne contrôle pas le nombre de saisie (ex: @yahoo.dsqdfsqfd = valide) et le curseur change quand même de champ malgré le message d'erreur

Code HTML :

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
<!DOCTYPE html>
<html>
<head>
	<title> CONTROLE MAIL</title>
</head>
<body>
 
<form>
 
   <p> Adresse mail : <input type="mail" name="mail" onblur="ValiderMail(this.form)"> </p>
 
   <p> Ville : <input type="texte" name="ville" id="ville"> </p>
 
<script type="text/javascript">
 
   function ValiderMail(formulaire)
    {
      if (formulaire.mail.value.indexOf("@",0)<0) 
        {
                alert("INVALIDE")
        }
      else 
      {
                alert("VALIDE.");
      }
   }
</script>
 
</form>
</body>
</html>

J'envisage au moins sur les champs "complexes : date, mail, téléphone... d'utiliser une fonction script. Qu'en pensez-vous

j'espère avoir été assez clair dans ma demande.

Merci pour votre aide précieuse

Cordialement

**psychadelic** · 01/03/2018, 01h06

Déjà vu,
https://www.developpez.net/forums/d7...ero-telephone/

**Oswalde** · 06/03/2018, 14h30

Bonjour,

Je ne crois pas que le problème soit lié à l'expression régulière, je rencontre un problème similaire https://www.developpez.net/forums/d1...soin-lumieres/
Se doit être dan l'évaluation de:

Code :

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

if (Telephone.test(verifTel))

**bricoreur** · 08/03/2018, 01h04

Merci pour votre retour,

je vais essayer ce WE.

je vous tiens au courant

Cordialement

**bricoreur** · 13/03/2018, 22h58

Bonjour,

je ne sais pas si cela est propre du point de vue du codage mais ça marche :

Contrôle pour une date :

Code html :

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

1
2
3
4
5
6
7
 
 
<p>
	<label for="naiss_joueur">DATE DE NAISS.</label>  
	<strong><title="" style="color:red">*</strong>
	<input type="text" id="naiss" name="naiss" required pattern="[0-9]{2}[/]{1}[0-9]{2}[/]{1}[0-9]{4}" placeholder="00/00/0000" title="séparer par un /">	  
</p>

Contrôle pour le téléphone :

Code html :

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

1
2
3
4
5
6
7
 
 
<p>
	<label for="tel_joueur">TEL.</label>  
	<strong><title="" style="color:red">*</strong>
	<input type="tel" id="tel" name="tel" required pattern="[0-9]{2}[\.]{1}[0-9]{2}[\.]{1}[0-9]{2}[\.]{1}[0-9]{2}[\.]{1}[0-9]{2}" title="séparez par un point" placeholder="00.00.00.00.00"> 																				
</p>

Contrôle pour le mail :

Code html :

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

1
2
3
4
5
6
7
 
 
<p>
	<label for="email_joueur">EMAIL</label>  
	<strong><title="" style="color:red">*</strong>
	<input type="mail" id="email_joueur" name="email_joueur" required pattern="[a-zA-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" >  
</p>

Au moment de soumettre mon formulaire via un bouton, il m'affiche tous les champs qui ne sont pas remplis ou mal remplis....si cela peut servir un débutant comme moi.

Je me pose la question pourquoi utiliser des fonctions pour faire des contrôles sur des champs de saisies simples ?

j'ai bien compris que les fonctions pouvaient être puissantes mais est-ce vraiment nécessaire pour de simples saisies...sachant si j'ai bien compris (?) que dans tous les cas il faudra que je vérifie/contrôle les données côté serveur car j'ai lu qu'il ne faut jamais faire confiance à l'intégrité des données côté client ?

**NoSmoking** · 14/03/2018, 18h58

Bonjour,

Je me pose la question pourquoi utiliser des fonctions pour faire des contrôles sur des champs de saisies simples ?

simplement pour améliorer le « confort » de l'utilisateur, en cas de saisie erronée il est immédiatement averti et n'est donc pas obligé d'attendre le retour du serveur.

(...)que dans tous les cas il faudra que je vérifie/contrôle les données côté serveur car j'ai lu qu'il ne faut jamais faire confiance à l'intégrité des données côté client ?

ça c'est un principe FONDAMENTAL à ne surtout pas omettre !

**bricoreur** · 15/03/2018, 07h54

merci pour votre réponse.

je vais m'exercer au développement des fonctions.

Controle saisie téléphone + mail + date etc

JavaScript

Discussions similaires

Partager

Partager