Formulaire javascript vérification simple

Version imprimable

Bonjour à tous j'aimerais utiliser javascript pour valider un formulaire de contact.
Je ne veux pas utiliser de librairie mais utiliser un code faisant que ce que je lui demande.

J'aimerais si possible un gros coup de main étant donné que je n'ai même pas de code à fournir en exemple.

J'ai cherché pendant des heures et je n'ai trouvé que des formulaires retournant des alert() ou alors des formulaires lourd utilisant jQuery ou autres...

Voici simplement ce que je voudrais :
Code:

1 2 3 4 5 <form name="contactform" method="post"> <input type="text" name="email" id="email" /> <input type="text" name="name" id="name" /> <input type="submit" name="submit" id="submit" value="Envoyer" /> </form>
Il faudrait que lorsque l'utilisateur se trouve dans le champ email une vérification en temps réel depuis une regex : ^[a-z0-9]([._-]?[a-z0-9])*@[a-z0-9]([.-]?[a-z0-9])*\.[a-z]{2,3}$/i
En cas d'erreur je veux simplement faire appelle a un style CSS .error qui va donc s'appliquer à mon input email.

Lorsque l'utilisateur se trouve dans le champ name une vérification que l'utilisateur a bien remplit quelque chose.
En cas d'erreur comme au dessus mais s'applique donc à ce input.

Si aucune erreur le formulaire peut être envoyé sinon le submit ne fonctionne pas.

Je vous remercie par avance et je lirais les commentaires au réveil :)

22/04/2010, 12h58
SpaceFrog

Il faut distinguer verfication en temps réel sur les champs et vérification à la soumission.
Pour le principe de la vérification à la soumission:
http://www.developpez.net/forums/d55...laire+onsubmit

pour la verification en temps réel sur le champs mail, je ne la recommande pas..
Il vaut mieux faire la vérification sur le onblur du champs
22/04/2010, 14h28
Tetsumaki

Merci beaucoup pour ton lien.

Celui-ci a l'air bien fournit, les réponses sont aussi super intéressante, ça a l'air de correspondre à ce que je recherche.

Je ne mets pas encore le "résolu" étant donné que je n'ai pas le temps tout de suite de me plonger dedans alors à ce soir pour de nouvelles aventures.

De retour.

Alors mon truc commence à prendre forme, ça fonctionne si j'ai un seul élément à vérifier mais sinon ça bug complètement.

Le fonctionnement que je voudrais :
- La vérification ce fait au submit
- En cas d'erreur applique un borderColor="red" à l'input sinon annule l'application du borderColor.
- Tester email avec le regex
- Tester nom avec length > 3

Ce serait extrêmement sympa que vous apportiez la modification nécessaire au bon fonctionnement du script, je pense que ça doit être très simple mais j'ai vraiment du mal en JS.

Merci par avance :)

Voici la source du script actuel en 3 fichiers :
http://tetsumaki.free.fr/form/test.html << Vous pouvez tester en même temps
http://tetsumaki.free.fr/form/test.css
http://tetsumaki.free.fr/form/test.js

test.html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-FR" lang="fr-FR" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Formulaire de vérification</title>
<link rel="stylesheet" href="test.css" type="text/css" media="all" />
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<form action="test.html" onsubmit="return verifForm()">
<p><label for="name">Nom</label><input type="text" id="name" name="name" size="24" /></p>
<p><label for="email">Email</label><input type="text" id="email" name="email" size="24" /></p>
<p><input type="submit" value="Envoyer" /></p>
</form>
</body>
</html>

test.css

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
label {
  display: inline-block;
  width: 96px;
  cursor: pointer;
}
 
input[type=text] {
  border: 1px dotted #000;
}
 
input[type=text]:focus,
input[type=text]:hover,
input[type=submit]:focus,
input[type=submit]:hover {
  border: 1px solid #000;
}
 
input[type=text].error {
  border: 1px dotted #ff0000;
}
 
input[type=text].error:hover {
  border: 1px solid #ff0000;
}
 
input[type=submit] {
  border: 1px dotted #000;
  cursor: pointer;
}

test.js

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
function verifForm(){
  /* Email **********
  ** ˇˇ A modifier */
  var theId    = "email";
  var theClass = "error";
  // ˆˆ Fin modification
  var obj = document.getElementById(theId);
  var reg = /^[a-z0-9]([._-]?[a-z0-9])*@[a-z0-9]([.-]?[a-z0-9])*\.[a-z]{2,3}$/i;
  var res = reg.test(obj.value);
  if ( res != true ) {
    obj.className=theClass;
    obj.style.borderColor="red";
    return false;
  }
  else {
    obj.style.borderColor="black";
  }
 
  /* Nom ************
  ** ˇˇ A modifier */
  var theId    = "name";
  var theClass = "error";
  // ˆˆ Fin modification
  var obj = document.getElementById(theId);
  if ( obj.value.length < 3 ) {
    obj.className=theClass;
    obj.style.borderColor="red";
    return false;
  }
  else {
    obj.style.borderColor="black";
  }
}

Le formulaire est terminé et fonctionnel.
Il utilise jQuery et il tourne en Ajax pour la validation du formulaire.
De plus si l'utilisateur n'a pas Javascript d'activé ça fonctionne quand même.

Il est super léger et a adapté au cas par cas.

5 fichiers à zieuter pour les sources :
http://tetsumaki.free.fr/form/contact.html << Vous pouvez tester
http://tetsumaki.free.fr/form/contact.css
http://tetsumaki.free.fr/form/contact.js
http://tetsumaki.free.fr/form/jquery.min.js
http://tetsumaki.free.fr/form/submit.php

Vous pouvez regarder les sources.

Et un petit zip de tout ça :
http://tetsumaki.free.fr/form/form.zip

Concernant le submit.php il n'envoit pas d'email c'est une simulation.

Le contenu de submit.php :
Code:

1 2 3 4 5 6 7 8 9 10 11 <?php if ( !$_POST ) die("(_!_)"); if ( preg_match('`^.{3,32}$`', $_POST['lname']) && preg_match('`^.{3,32}$`', $_POST['fname']) && preg_match('`^.{0,32}$`', $_POST['society']) && preg_match('`^[[:alnum:]]([._-]?[[:alnum:]])*@[[:alnum:]]([.-]?[[:alnum:]])*\.[[:alpha:]]{2,3}$`', $_POST['email']) && preg_match('`^.{32,}$`', $_POST['msg']) ) { print '<p class="success">L\'envoi de votre email s\'est bien déroulé.</p>'; } else { print '<p class="error">Une erreur c\'est produite.<br />Vous avez sans doute mal renseigné les champs.<br />Veuillez réessayer, si le problème persiste contactez nous d\'autre une manière.</p>'; } ?>
Si vous voyez des choses a améliorer je suis preneur.