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.

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 points
Des caractères après un dernier point
Pas de point non suivi de caractères

Voilà ce que nous pourrions avoir:

<form>
<input type="text" name="mail">
<input type="button" name="submit" value="envoyer" onclick="verifMail(this.form.mail.value)">
</form>

<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>

Vous avez pu remarquer la présence de méthodes un peu spéciales telles que :

indexOf()
lastIndexOf()

Voici leur description:
indexOf(“chaine”, position) :
Cette méthode permet de retourner la première occurence 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 :

var chaine = "Dreamweaver-forum est vraiment super" ;

chaine.indexOf(“er”) retournera 9.
chaine.indexOf(“er”, 10) retournera 34.
chaine.indexOf(“rien”) retournera -1.

lastIndexOf(“chaine”, position) :
Cette méthode permet de retourner la dernière occurence 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 :

var chaine = "Dreamweaver-forum est vraiment super" ;

chaine.lastIndexOf(“er”) retournera 34.
chaine.lastIndexOf(“er”, 10) retournera 9.
chaine.lastIndexOf(“rien”) retournera -1.

Nous pouvons maintenant passer à une explication du script :

Nous avons créé une procédure appelée verifMail qui admet un paramètre email. 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.

<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>

function verifNombre (nb)
{
if ( isNaN (nb) )
alert ( "Vous n'avez pas saisi de nombres" ) ;
else
alert( "Vous avez bien saisi un nombre" ) ;
}

Je pense qu'il est inutile d'expliquer le HTML , passons directement au JavaScript:

Nous avons créé une procédure verifNombre qui admet un paramètre nb. Nous utilisons la fonction prédéfinie de JavaScript isNaN() qui signifie is Not a Number. Cette fonction retourne un booléen true ou false. Si isNaN a retourné true, on affiche “vous navez pas saisi de nombres” sinon on affiche “Vous avez saisi un nombre”.

<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>

<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>

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 contient une variable champCacheViande qui a pour valeur une table HTML avec du contenu.
Ensuite nous affichons cette variable grâce à document.result.innerHTML = champCacheViande ;.
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 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 ?

Tutorial de qwix