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.