11548 sujets

JavaScript, DOM et API Web HTML5

Vérification de formulaire

Bonjour, j'ai un test de formulaire qui ne marche pas et je ne voit pas du tout pourquoi ?
Quelqu'un verait pourquoi ?

Peut etre est ce parce que les champs sont des chekbox ?

<SCRIPT LANGUAGE="JavaScript">
function verifForm(formulaire){
  if( formulaire.tenue.value == "")
  alert('Veuillez renseignée:Tenue de bulletins de paie  ');
  else if ( formulaire.edition.value == "")
   alert('Veuillez renseignée:Edition de bulletins de paie ');
  else if ( formulaire.maj.value == "")
  alert('Veuillez renseignée:Mise à jour et paramétrage ');
  else if ( formulaire.etat.value == "")
  alert('Veuillez renseignée:Etat des charges');
  else if ( formulaire.declaration.value == "")
  alert('Veuillez renseignée:Déclarations sociales (TDS,…) ');
  else
  formulaire.submit();
  }
</SCRIPT>
Merci pour la réponse

J'ai changer le script comme sa mais sa ne marche toujours pas:

<SCRIPT LANGUAGE="JavaScript">
function verifForm(formulaire){
  if( formulaire.tenue.checked== false)
  alert('Veuillez renseignée:Tenue de bulletins de paie  ');
  else if ( formulaire.edition.checked== false)
   alert('Veuillez renseignée:Edition de bulletins de paie ');
  else if ( formulaire.maj.checked== false)
  alert('Veuillez renseignée:Mise à jour et paramétrage ');
  else if ( formulaire.etat.checked== false)
  alert('Veuillez renseignée:Etat des charges');
  else if ( formulaire.declaration.checked== false)
  alert('Veuillez renseignée:Déclarations sociales (TDS,…) ');
  else
  formulaire.submit();
  }
</SCRIPT>


Une autre idée?
Voila le formulaire

<td width="40%">Tenue de bulletins de paie</td>
        <td width="21%"><label>
          <input name="tenue" type="checkbox" id="tenue" value="D&eacute;jà propos&eacute;" />
        </label></td>
        <td width="16%"><label>
          <input name="tenue" type="checkbox" id="tenue" value="Envisag&eacute;" />
        </label></td>
        <td width="23%"><input name="tenue" type="checkbox" id="tenue" value="Aucun" /></td>
      </tr>
      <tr>
        <td>Edition de bulletins de paie</td>
        <td><input name="edition" type="checkbox" id="edition" value="D&eacute;jà propos&eacute;" /></td>
        <td><label>
          <input name="edition" type="checkbox" id="edition" value="Envisag&eacute;" />
        </label></td>
        <td><input name="edition" type="checkbox" id="edition" value="Aucun" /></td>
      </tr>
      <tr>
        <td><label>Mise &agrave; jour et param&eacute;trage
          
        </label></td>
        <td><input name="maj" type="checkbox" id="maj" value="D&eacute;jà propos&eacute;" /></td>
        <td><input name="maj" type="checkbox" id="maj" value="Envisag&eacute;" /></td>
        <td><input name="maj" type="checkbox" id="maj" value="Aucun" /></td>
      </tr>
      <tr>
        <td>Etat des charges</td>
        <td><input name="etat" type="checkbox" id="etat" value="D&eacute;jà propos&eacute;" /></td>
        <td><input type="checkbox" name="checkbox9" id="checkbox9" /></td>
        <td><input name="etat" type="checkbox" id="etat" value="Aucun" /></td>
      </tr>
      <tr>
        <td>D&eacute;clarations sociales (TDS,&hellip;)</td>
        <td><input name="declaration" type="checkbox" id="declaration" value="D&eacute;jà propos&eacute;" /></td>
        <td><input name="declaration" type="checkbox" id="declaration" value="Envisag&eacute;" /></td>
        <td><input name="declaration" type="checkbox" id="declaration" value="Aucun" /></td>
      </tr>
      <tr>
        <td>Autre(s) prestation(s)&nbsp;; pr&eacute;cisez&nbsp;:
          <label>
          <input name="autre1" type="text" id="autre1" size="15" />
          </label></td>
        <td><input name="autre" type="checkbox" id="autre" value="D&eacute;jà propos&eacute;" /></td>
        <td><input name="autre" type="checkbox" id="autre" value="Envisag&eacute;" /></td>
        <td><input name="autre" type="checkbox" id="autre" value="Aucun" /></td>
      </tr>
      <tr>
        <td colspan="4">&nbsp;</td>
      </tr>
      <tr>
        <td colspan="4">&nbsp;<div align="center">
        
            <input type="submit" name="button" id="button" value="Continuer" onClick="verifForm(this.form)">
Je penses que tu voulais plustot des radiobutton et non des checkbox

Le formulaire 

<form>
   <table>
      <tr>
         <td width="40%">Tenue de bulletins de paie</td>
         <td width="21%"><input name="tenue" type="radio" id="tenue" value="Déjà proposé" /></td>
         <td width="16%"><input name="tenue" type="radio" id="tenue" value="Envisagé" /></td>
         <td width="23%"><input name="tenue" type="radio" id="tenue" value="Aucun" /></td>
      </tr>
      <tr>
         <td>Edition de bulletins de paie</td>
         <td><input name="edition" type="radio" id="edition" value="Déjà proposé" /></td>
         <td><input name="edition" type="radio" id="edition" value="Envisagé" /></td>
         <td><input name="edition" type="radio" id="edition1" value="Aucun" /></td>
      </tr>
      <tr>
         <td>Mise à jour et paramétrage</td>
         <td><input name="maj" type="radio" id="maj" value="Déjà proposé" /></td>
         <td><input name="maj" type="radio" id="maj" value="Envisagé" /></td>
         <td><input name="maj" type="radio" id="maj" value="Aucun" /></td>
      </tr>
      <tr>
          <td>Etat des charges</td>
          <td><input name="etat" type="radio" id="etat" value="Déjà proposé" /></td>
          <td><input type="radio" name="etat" id="etat" /></td>
          <td><input name="etat" type="radio" id="etat" value="Aucun" /></td>
      </tr>
      <tr>
         <td>Déclarations sociales (TDS,…)</td>
         <td><input name="declaration" type="radio" id="declaration" value="Déjà proposé" /></td>
         <td><input name="declaration" type="radio" id="declaration" value="Envisagé" /></td>
         <td><input name="declaration" type="radio" id="declaration" value="Aucun" /></td>
      </tr>
      <tr>
         <td>Autre(s) prestation(s) ; précisez : <input name="autre1" type="text" id="autre1" size="15" /></td>
         <td><input name="autre" type="radio" id="autre" value="Déjà proposé" /></td>
         <td><input name="autre" type="radio" id="autre" value="Envisagé" /></td>
         <td><input name="autre" type="radio" id="autre" value="Aucun" /></td>
      </tr>
      <tr>
         <td colspan="4"> </td>
      </tr>
      <tr>
         <td colspan="4"> 
            <div align="center">
               <input type="submit" name="button" id="button" value="Continuer" onClick="verifForm(this.form)">
            </div>
         </td>
      </tr>
   </table>
</form>


le script


<SCRIPT LANGUAGE="JavaScript">

function verifForm(formulaire)
   { 
      if( (formulaire.tenue[0].checked== false) && (formulaire.tenue[1].checked== false) && (formulaire.tenue[2].checked== false) )
         alert('Veuillez renseignée:Tenue de bulletins de paie  ');

      else if ( (formulaire.edition[0].checked== false) && (formulaire.edition[1].checked== false) && (formulaire.edition[2].checked== false) )
         alert('Veuillez renseignée:Edition de bulletins de paie ');

      else if ( (formulaire.maj[0].checked== false) && (formulaire.maj[1].checked== false) && (formulaire.maj[2].checked== false) )
         alert('Veuillez renseignée:Mise à jour et paramétrage ');
		
      else if ( (formulaire.etat[0].checked== false) && (formulaire.etat[1].checked== false) && (formulaire.etat[2].checked== false) )
         alert('Veuillez renseignée:Etat des charges');

      else if ( (formulaire.declaration[0].checked== false) && (formulaire.declaration[1].checked== false) && (formulaire.declaration[2].checked== false) )
         alert('Veuillez renseignée:Déclarations sociales (TDS,…) ');

      else
         formulaire.submit();
   }

</SCRIPT>


Sinon, si c'etait bien de checkbox, je crois que les ids et le names doivent tous etres differents.
Salut, salut,
Krafton a écrit :
Je crois que tu confonds checkbox et radiobutton
Il semblerait que oui Smiley cligne

Krafton a écrit :
tes id et name on le meme nom.
Dans tous les cas un id doit être unique dans une page. Voir la FAQ : différence entre un id et une classe.

Un premier avantage c'est que l'on peut utiliser la forme 
<label for="mon_id">Bla bla bla :</label>
<input id="mon_id" ... />
Un second est que l'on peut très facilement cibler un élément avec par exemple 
if (document.getElementById('mon_id').checked == true) { ... }

A+
Merci pour ces soluces mais le problème est toujours en partie la. En effet, j'ai bien un message d'erreur qui s'affiche mais le problème c'est qu'il passe quand même à la page suivante.

Pourquoi ?
Euh comment je le met en place ?

else if ( (formulaire.declaration[0].checked== false) && (formulaire.declaration[1].checked== false) && (formulaire.declaration[2].checked== false) )
alert('Veuillez renseignée:Déclarations sociales (TDS,…) '

avec return = false ?
Essaies de remplacer


<input type="submit" name="button" id="button" value="Continuer" onClick="verifForm(this.form); ">


par


<input type="submit" name="button" id="button" value="Continuer" onClick="verifForm(this.form); return false;">
Bon alors j'en remets une couche avec mes getElementById même si le principe est le même Smiley smile :
else if ((document.getElementById('declaration0').checked == false) && (document.getElementById('declaration1').checked == false) && (document.getElementById('declaration2').checked == false)) {
alert('Veuillez renseignée:Déclarations sociales (TDS,…);
return = false;
}

En passant, <SCRIPT LANGUAGE="JavaScript"> est déprécié et devrait être remplacé par <script type="text/javascript">


Edit: en reprenant la proposition de Krafton et pour que ton formulaire soit accessible il faudrait remplacer le onClick="verifForm(this.form)" sur l'input type submit par onsubmit="verifForm(this.form); return false;" directement dans ta balise <form>
Modifié par Heyoan (04 Jun 2008 - 12:15)
Merci de ton aide. L'ajout du return false est plus imple pour moi dans l'appel a verif form mais sinan sa marche impect

Merci Smiley biggrin
Sujet clos
Aller à