Forum d'entraide PHPFrance

Bonjour. J'aimerai contoler (en javascript avant contole php) la valeur des champs d'un formulaire avant son envoi.

J'ai un souci avant le champ imput type="file"

voici ma fonction de controle :

Code : Tout sélectionner

function valider()
 {
  // si la valeur du champ fichier est non vide
  if(document.form.fichier.value != "") 
    {
    // les données sont ok, on peut envoyer le formulaire    
    return true;
    }
  else 
    {
    // sinon on affiche un message
    alert("Sélectionnez un fichier");
    // et on indique de ne pas envoyer le formulaire
    return false;
    }
 }

et le formulaire

Code : Tout sélectionner

<form action="url" onsubmit="return valider()" method="post" name="form"  enctype="multipart/form-data">
  <p>
    <label for="fichier">Sélectionnez le fichier:</label>
    <input type="file" name="fichier" id="fichier" />
    <input type="submit" value="Ok" />
  </p>
</form>

Le script fonctionne bien avec un champ de type text mais pas avec le type file

bon j'ai peut-etre trouvé une solution :

Code : Tout sélectionner

function valider(idInput, valeurVide)
{
 var input = document.getElementById(idInput);

 if (input.value == valeurVide) 
   {
   input.focus();
   alert('Vous devez sélectionner un fichier');
   return false;
   } 
 else
   {
   return true;
   }
}
</script>

 - - - - - - - - - - - - - - - - - - - - - - 

<form action="url" onsubmit="return valider('fichier', '');" name="form" method="post" enctype="multipart/form-data">
<input name="fichier" id="fichier" type="file" />
<input type="submit" value="Ok" />
</form>

Mais comme je débute en JS je me demande si cette solution n'est pas bancale

La solution n'est pas foncièrement mauvaise, le principe est là. Mais il y a des erreurs à corriger.

D'abord, tu utilises dans ton formulaire une syntaxe XHTML : donc l'attribut "name" est interdit dans la balise <form> et doit être remplacée par l'attribut "id". Ça implique qu'on va pointer dessus depuis le JavaScript d'une manière différente.

Ta syntaxe JavaScript est définie selon le HTML 4, il faut adapter au XHTML.

L'utilisation de getElementById() est utile lorsqu'on veut pointer quelque part dans une page HTML, mais dans le cas d'un formulaire, on va procéder comme suit : Au lieu de : document.nom-du-formulaire.etc... on devra utiliser document.forms['id-du-formulaire.etc...'] (Attention, forms avec un "s". Même chose pour l'élément du formulaire. On va utiliser l'identifiant du champ.

Voici ce que donne une page complète sur la base de ton code corrigé :

Code : Tout sélectionner

<?xml version="1.0" encoding="iso-8859-1" ?>
<!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" lang="fr">
<!-- Date de création: 23/09/2006 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" xml:lang="fr" />
<title></title>
<meta http-equiv="Content-language" content="FR-fr" xml:lang="fr" dir="ltr" />
<script type="text/javascript">
/* <![CDATA[ */
function valider(idForm, idInput)
{
    var input = document.forms[idForm].elements[idInput];

    if (input.value == '')
    {
        input.focus();
        alert('Vous devez sélectionner un fichier');
        return false;
    }
    else
    {
        return true;
    }
}
/* ]]> */
</script>
</head>
<body>
<form action="url" onsubmit="return valider('form', 'fichier');" id="form" method="post" enctype="multipart/form-data">
  <p>
  <input name="fichier" id="fichier" type="file" />
  <input type="submit" value="Ok" />
  </p>
</form>
</body>
</html>

Tu noteras que j'ai modifié les paramètres de l'appel de validation : au lieu d'envoyer en second paramètre une chaine vide, je traite ce point directement dans la fonction et à la place, j'envoie l'identifiant du formulaire et le champ à valider. Cette manière de faire te permet d'utiliser ta fonction à partir d'un fichier externe dans n'importe quel formulaire de ton site.

Merci beacoup.
Une derniere question, si on souhaite utiliser ce script pour verifier d'autre champs du formulaire, je suppose qu'il faut modifier la methode onsubmit et rajouter une boucle if{} else{} pour chaque alerte.

Code : Tout sélectionner

onsubmit="return valider('form', 'fichier');"

Mais comment declarer une variable à la place de 'fichier', pour que cela fonctionne avec les autre id des champs

Tu pourrais avoir une liste des identifiants des champs dans un tableau JavaScript par exemple, chargé AVANT le code de la fonction s'entend. À partir de là, tu peux envoyer de tableau en paramètre au lieu d'indiquer seulement un champ. Et dans ce cas tu devras modifier ta fonction pour traiter le tableau dans une boucle.

Enfin c'est une idée vite fait, il peut y avoir éventuellement d'autres méthodes.

Pour ma part, je suggère deux choses :
- un fichier de fonctions génériques pour des traitement indépendament du formulaire traité;
- un fichier (JavaScript) de validation qui lui sera spécifique au formulaire mais pour valider tel ou tel champ utilisera les fonctions du premier.
Donc si tu as 5 formulaires dans ton site, tu auras un fichier de foncitons génériques et cinq fichiers de traitement.

ok ok et encore merci de m'avoir si bien éclairé... une fois de plus

Forum d'entraide PHPFrance

Controler un champ imput file

Controler un champ imput file