Dans cette seconde partie, nous allons voir quelques exemples de traitement de formulaires.
Nous allons voir :
Comment vérifier si un adresse email saisie dans un champ de texte est bien valide.
Comment vérifier si un nombre à bien été saisi.
Afficher des champs en fonction d'un choix.
Envoyer un formulaire via JavaScript.
Vérification d'une adresse email
Pour savoir si une adresse email est valide ou pas, il nous faut vérifier si elle contient:
Des caractères avant le @.
Un @.
Des caractères après ce @.
Un ou plusieurs..
Des caractères après un dernier ..
Pas de . non suivi de caractères.
Voilà ce que nous pourrions avoir:
en HTML:
[quote]
<form>
<input type="text" name="mail">
<input type="button" name="submit" value="envoyer" onclick="verifMail(this.form.mail.value)">
</form>
[/quote]
en JavaScript:
| CODE |
|
<script language="javascript">
function verifMail ( email )
{
if ( email == "" )
alert( "Veuillez remplir le champ" );
else
{
if ( ( email.indexOf("@") == -1 ) || ( email.indexOf("@") == 0 ) || ( email.indexOf("@") != email.lastIndexOf("@") ) || ( email.indexOf(".") == email.indexOf("@")-1 ) || ( email.indexOf(".") == email.indexOf("@") +1 ) || ( email.indexOf("@") == email.length -1 ) || ( email.indexOf (".") == -1 ) || ( email.lastIndexOf (".") == email.length -1 ) )
alert( "email incorrect" );
else
alert( "email correct" );
}
}
</script>
|
Explications:
Vous avez pu remarquer la présence de méthodes un peu spéciales telles que :
indexOf()
lastIndexOf()
[/color]
Voici leur description:
indexOf(\"chaine\", position) :
Cette méthode de la valeur de "chaine" à partir d'une position 'position'.
Par défaut, position vaut 0, c'est à dire que vous pouvez appeler la propriété comme ceci :indexOf ("abcd", 0) ou comme ceci ("abcd"),
si vous souhaitez comencer au début de la chaine, les deux notations sont strictement équivalentes.
Par contre si vous souhaitez préciser une position (4 par exemple) vous devez le déclarer dans l'appel de la méthode, par exemple; indexOf("abcd", 4) .
Si la chaine recherchée n'est pas présente, la valeur retournée sera -1.
indexOf() commence à compter à partir de zéro ainsi :
| CODE |
|
var chaine = "Dreamweaver-forum est vraiment super";
|
chaine.indexOf(\"er\").
chaine.indexOf(\"er\", 10).
chaine.indexOf(\"rien\").
lastIndexOf(\"chaine\", position) :
Cette méthode de la valeur de "chaine" à partir d'une position 'position'.
Si la chaine recherchée n'est pas présente, la valeur retournée sera -1.
lastIndexOf() commence à compter à partir de zéro ainsi :
| CODE |
|
var chaine = "Dreamweaver-forum est vraiment super";
|
chaine.lastIndexOf(\"er\").
chaine.lastIndexOf(\"er\", 10).
chaine.lastIndexOf(\"rien\").
Nous pouvons maintenant passer à une explication du script :
Nous avons créé une procédure appelée verifMail. En tout premier lieu nous vérifions si le champ à bien été rempli (he oui sinon c'est inutile de vérifier si l'email est correct ou non ). Après cette vérification, nous avons une suite de conditions qui peuvent vous parraitre un peu bizarre c'est pour cela que nous allons les expliquer une par une:
email.indexOf (\"@\") == -1 permet de vérifier s'il y a un "@" dans le mail.
email.indexOf (\"@\") == 0 permet de vérifier s'il n' y a pas de "@" en début du mail.
email.indexOf (\"@\") != email.lastIndexOf(\"@\") permet de vérifier s'il n'y a pas pas plusieurs "@" dans le mail
email.indexOf (\".\") == email.indexOf(\"@\") -1 permet de vérifier s'il y a du texte entre le "." et "@", ainsi il est impossible de faire : 'texte.@'
email.indexOf (\".\") == email.indexOf(\"@\") +1 permet de vérifier s'il y a du texte entre "@" et ".", , ainsi il est impossible de faire : 'texte@.'
email.indexOf (\"@\") == email.length -1 permet de vérifier s'il n'y pas de "@" en fin de mail.
email.indexOf (\".\") == -1 permet de vérifier s'il y a au moins un "." dans le mail.
email.lastIndexOf (\".\") == email.length -1 permet de vérifier s'il n'y pas de "." en fin de mail.
Si une des conditions si dessus est remplies alors le mail est incorrect sinon cela signifie qu'il est correct.
Vérification si ce qui a été saisi est un nombre
en HTML:
[quote]
<form>
entrez ce que vous voulez <input type='text'name='nombre'><br>
<input type='button' name='bouton' value='Vérifier si c est un nombre' onClick='verifNombre(this.form.nombre.value)'>
</form>
[/quote]
en JavaScript:
| CODE |
|
function verifNombre (nb)
{
if ( isNaN (nb) )
alert ( "Vous n'avez pas saisi de nombres" );
else
alert( "Vous avez bien saisi un nombre" );
}
|
Explications:
Je pense qu'il est inutile d'expliquer le HTML , passons directement au JavaScript:
Nous avons créé une procédure verifNombre.
Afficher un champ en fonction d'un choix
En HTML:
[quote]
<form>
Vous aimez:<br>
La viande <input type="radio" name="gout" value="radiobutton" onClick="afficheViande()">
Le poisson <input type="radio" name="gout" value="radiobutton" onClick="affichePoisson()">
</form>
<form name="result">
<br>
<br>
</form>
[/quote]
En JavaScript :
| CODE |
|
<script language="JavaScript" type="text/JavaScript">
function afficheViande()
{
var champCacheViande = "<table width='165' border='0' cellspacing='0' cellpadding='0'><tr> <td width='89'><div align='center'>Boeuf </div></td>"
+"<td width='76'> <div align='left'> <input type='radio' name='viande' value='radiobutton'></div></td></tr>"
+"<tr><td><div align='center'>Poulet </div></td>"
+"<td> <div align='left'><input type='radio' name='viande' value='radiobutton'></div></td></tr>"
+"<tr><td><div align='center'>Mouton</div></td><td> <div align='left'>"
+"<input type='radio' name='viande' value='radiobutton'></div></td></tr></table>";
document.result.innerHTML = champCacheViande;
}
function affichePoisson()
{
var champCachePoisson = "<table width='165' border='0' cellspacing='0' cellpadding='0'><tr><td width='89'>"
+"<div align='center'>Truite</div></td><td width='76'> <div align='left'>"
+"<input type='radio' name='poisson' value='radiobutton'></div></td></tr>"
+"<tr><td><div align='center'>Thon</div></td><td> <div align='left'>"
+"<input type='radio' name='poisson' value='radiobutton'></div></td>"
+"</tr><tr> <td><div align='center'>Saumon</div></td><td> <div align='left'>"
+"<input type='radio' name='poisson' value='radiobutton'></div></td>"
+"</tr></table> ";
document.result.innerHTML = champCachePoisson;
}
</script>
|
Explications:
Il n'y a rien de très compliqué dans ce script. Vous avez sûrement du remarquer la propriété innerHTML.
C'est grâce à elle que nous pouvons afficher dynamiquement nos champs de formulaires.
Voici comment marche le script:
Nous avons créé une procédure afficheViande() qui a pour
valeur une table HTML avec du contenu.
Ensuite nous affichons cette variable grâce à document..
Où result est le nom du formulaire que nous avons créé dans notre HTML .
La procédure affichePoisson fonctionne exactement de la même manière.
Envoyer un formulaire via JavaScript :
Envoyer un formulaire en JavaScript est relativement simple il s'uffit juste de :
Créer un formulaire avec un bouton de type button
dans le script de rajouter LeNomDuFormulaire.submit()
Et voilà, simple non ?
img:coupe img:remarque A voir également :
