Hébergement du site en PHP et Mysql par WDMédia-hébergement
Vous aussi adpotez les éléPHPants de Vincent Pontier !  
CONCOURS
 
 
PLUS DE PHP
 
 
PLUS DE JAVASCRIPT
 
COMMENT CA MARCHE
 
 
EXPLIQUE-MOI
 
 
NEWS LETTER
 

 
PARTENAIRES
 
Découvrez scriptsphp.org
Découvrez phpteam.net
Tout sur les expressions régulières
IE sucks :-)
 
DESIGN DU SITE
 
Contrôles
Tuto écrit par LionZion, revu par Molokai et Raf en août 2004

Comme vous le savez le Javascript s'exécute côté client, cela est très pratique dans le cas où l'on souhaite contrôler les champs d'un formulaire sans avoir à appeler un script pour faire cette vérification, tout est fait dans la même page sans générer de trafic.

Ceci dit, le javascript peut être désactivé. Utilisez-le pour le confort de vos visiteurs mais vérifiez toujours les informations transmises par un script PHP !

1 . Contrôlons un champ pour savoir s'il est vide, alors qu'il devrait contenir quelque chose :

Code Javascript - Contrôle d'un champ vide

<SCRIPT language="JavaScript">
<!--
function ControleVide()
{

if(document.Formulaire.Nom.value=='')
{
alert('Le champ NOM ne peut pas rester vide !');
document.Formulaire.Nom.focus();
}

else
{
document.Formulaire.method = "POST";
document.Formulaire.action = "le_fichier.php";
document.Formulaire.submit();
}

}
//-->
</script>

Code HTML du Formulaire

Tester le script

<body>
<form name="
Formulaire">
<input type="text" name="
Nom" size="10" maxlength="8"> <br>

<input type="
button" value="Valider" onClick="ControleVide()">
</form>
</body>


En Javascript on indique l'arborescence complète de l'emplacement de "l'objet" qui doit doit être contrôlé (ici le champ Nom), ce qui donne :
- page.nomduformulaire.nomduchamp.fonction();

Soit en Javascript dans notre exemple :
- document.Formulaire.Nom.value(); // Soit : le champ "Nom" qui se trouve dans le formulaire "Formulaire" de cette page "document".

Nous utilisons donc la fonction "value()" pour savoir si le champ "Nom" est vide ou pas :
if(document.Formulaire.Nom.value=='') // si le champ Nom est strictement égal à rien (==''), donc vide.
{
alert('Le champ NOM ne peut pas rester vide !');
// on affiche une alerte à l'écran.
document.Formulaire.Nom.focus();
// puis on renvoie le curseur (focus) dans le champ Nom.
}

Autrement (else), et si le champ n'est pas vide, nous postons les informations, celà se fait de la manière suivante en Javascript :

document.Formulaire.method = "POST";
document.Formulaire.action = "le_fichier.php";
document.Formulaire.submit();

Pour finir regardons le bouton qui déclenche la fonction de vérification :

<input type="button" value="Valider" onClick="ControleVide()">

Vous notez de suite que le type n'est pas Submit mais Button , vous ne devez JAMAIS employer le type Submit en Javascript, TOUJOURS un type Button !
L'on voit aussi que c'est l'action onClick qui va déclencher la fonction de vérification, ce qui normal dans le cas d'un bouton, il existe d'autres actions que nous verrons dans un autre tutorial.

* NB: La casse est très importante en Javascript ! nom n'est pas Nom , mais vous devez commencer à y être habitués avec PHP :).

2 . Dans notre second exemple nous allons faire 3 vérifications différentes sur le même champ :

1 - Est-il vide ?
2 - Ne comporte t'il bien que des caractères numériques (0 à 9) ?
3 - Fait-il plus de 6 caractères ?

Code Javascript - Exemple 2

<SCRIPT language="JavaScript">
<!--
function Controle()
{

if(document.FormNom.Nom.value=='') // 1
{
alert('Le champ Nom ne peut pas rester vide !');
document.FormNom.Nom.focus();
}
else if(
isNaN(document.FormNom.Nom.value)) // 2
{
alert('Le champ Nom ne peut être que numérique !');
document.FormNom.Nom.focus();
}
else if(
document.FormNom.Nom.value.length>6) // 3
{
alert('Le champ Nom ne peut pas excéder 6 caractères !');
document.FormNom.Nom.focus();
}

else
{
document.FormNom.method = "POST";
document.FormNom.action = "le_fichier.php";
document.FormNom.submit();
}

}
//-->
</script>

Code HTML du Formulaire

<body>
<form name="
FormNom">
<input type="text" name="
Nom" size="10"><br>

<input type="
button" value="Valider" onClick="Controle();">
</form>
</body>

Dans cet exemple nous exécutons trois contrôles succesifs pour vérifier que ce que rentre le visiteur est valide.

1. Nous contrôlons que le champ n'est pas vide.
2. Nous contrôlons que le champ est bien numérique (isNaN = is Not a Numeric).
3. Nous contrôlons que le champ ne dépasse pas 6 caractères en longueur (lenght).
4. Tout est ok, nous postons les informations du formulaire vers la page de notre choix (document.FormPass.method ... etc).

NB: Attention chose importante en Javascript le elseif s'écrit : ELSE IF (avec un espace entre ELSE et IF à la différence de de PHP où ELSEIF est attaché), faites bien attention à cela, car il m'est arrivé de chercher pendant un bout de temps ce genre d'erreurs bêtes.





Ajouter une réponse
Nom
Email
Titre

Mise en forme : gras = [b]...[/b], italic = [i]...[/i], souligné = [u]...[/u], citation = [quote]...[/quote], lien = [url]liens_externe[/url] ou [url nom=texte]liens_externe[/url], code source : [code]...[/code]

Mémoriser mon nom et mon email : Oui Non
www.phpdebutant.org © 2014 - L'équipe de phpDebutant - Hébergement : WDMédia-hébergement
DEBUTEZ !
 
  0.  Introduction
  1.  Afficher une phrase ou une image
  2.  Afficher la date et l'heure
  3.  PHP dans du code HTML
  4.  La concaténation
  5.  Récupérer les valeurs d'un formulaire
  6.  Les structures de contrôle
  7.  Ecrire et lire dans un fichier texte
  8.  Les fonctions utilisateurs
  9.  Les variables d'environnement
  10.  Quelques fonctions utiles
  11.  SQL/MySQL (Create, Alter & Drop)
  12.  SQL/MySQL (Insert et Select)
  13.  SQL/MySQL (Delete et Update)
  14.  SQL/MySQL (Where)
  15.  Fonctions PHP pour mySQL
  16.  Interroger une table MySQL
  17.  Alimenter une ou plusieurs tables mySQL
  18.  Les pseudos-frames
  19.  Les sessions php4
  20.  Affichage page par page
  21.  Images dynamiques
  22.  Ca marche pas ?
  23.  Variables globales à OFF
  24.  Les variables dynamiques