Validation formulaire impossible

Validation formulaire impossible - HTML/CSS - Programmation

Marsh Posté le 02-06-2011 à 12:49:08    

Bonjour à tous,
 
Je suis en train de faire une petite application html qui référence les livres d'une bibliothèque privée. J'ai une page "référence des livres" qui se compose de champs de saisie texte (titre, auteur, etc...) et de boutons radio pour choisir le genre du livre. Je voudrais vérifier à l'aide de JavaScript si l'utilisateur a bien rempli les champs de saisie et coché l'un des boutons radio avant de valider mon formulaire.
Pour la vérification des champs de saisie, je n'ai pas de problème. Par contre, je n'arrive pas à faire tester mes boutons radio par JavaScript. Cela fait 3 jours entiers que je cherche sur Internet et que j'essaie de faire tous les codes possibles et imaginables, et rien ne fonctionne jamais sur mes boutons radio.
Je vous soumets donc mon code, si quelqu'un pouvait me dire ce qui ne va pas :
 

Citation :


 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Page enregistrement</title>
<link rel="stylesheet" type="text/css" href="./styles.css">
 
<!--Teste les champs de saisie texte :-->
<script type="text/javascript" >
  function test()
 {
   var ok=0;
   if (document.formulaire1.titre.value=='')
   {
     document.formulaire1.titre.value=prompt('Veuillez remplir le champ "Titre" :');
   ok=1;
   }
   if (document.formulaire1.auteur.value=='')
   {
     document.formulaire1.auteur.value=prompt('Veuillez remplir le champ "Auteur" :');
   ok=1;
   }
   if (document.formulaire1.editeur.value=='')
   {
   document.formulaire1.editeur.value=prompt('Veuillez remplir le champ "Editeur" :');
   ok=1;
   }
   if (document.formulaire1.genre.value=='')
   {
     document.formulaire1.genre.value=prompt('Veuillez remplir le champ "Genre" :');
   ok=1;
   }
   if (ok==0)
   {
   return true;
   }
   else
   {
   return false;
   }
 }  
</script>
 
<!--Teste les boutons radio :-->
<script type="text/javascript" >
  function verifRadio()
  {
  document.getElementsByName("genre" ).!checked;
  }
  alert("Cocher les cases" );
</script>
</head>
 
 
<body>
  <div>
  <form method="post" action="" name="formulaire1" onsubmit="return test();">
  <table class="table_form" cellpadding="0" cellspacing="0">
  <caption class="gros_titre">Nouveau livre</caption>  
 
    <!--Champs de saisie texte :-->
  <tr>
    <td>
    <fieldset>
      <legend class="texte_fieldset">Références du livre</legend>
      <table border="0" cellpadding="0" cellspacing="10">
      <tr>                    
        <td class="legende"><label for="titre">Titre : </label></td>
      <td><input name="titre" id="titre" type="text" size="40" class="champ"></td>
     </tr>
     
     <tr>
       <td class="legende"><label for="auteur">Auteur : </label></td>
       <td><input name="auteur" id="auteur" type="text" size="30" class="champ"></td>
     </tr>
         
     <tr>
       <td class="legende"><label for="editeur">Éditeur : </label></td>
       <td><input name="editeur" id="editeur" type="text" size="30" class="champ"></td>
     </tr>
     <tr>
       <td height="5"> </td>        
     </tr>
     <tr>
       <td><input type="reset" name="reset" value="   Recommencer   " class="bouton_simple"></td>
     </tr>
    </table>  
   </fieldset>
     
   <!--Boutons radio :-->
   <fieldset>
     <legend class="texte_fieldset">Genre</legend>
     <table border="0" cellpadding="0" cellspacing="0">
       <tr>
       <td>
       <input type="radio" name="genre" id="roman" value="roman"><label for="roman" class="legende">Roman</label><br>
       <input type="radio" name="genre" id="informatique" value="informatique"><label for="informatique" class="legende">Informatique</label><br>
       <input type="radio" name="genre" id="sante" value="sante"><label for="sante" class="legende">Santé</label><br>
       <input type="radio" name="genre" id="spiritualite" value="spiritualite"><label for="spiritualite" class="legende">Spiritualité</label><br>
       <input type="radio" name="genre" id="cuisine" value="cuisine"><label for="cuisine" class="legende">Cuisine</label><br>
       <input type="radio" name="genre" id="bricolage" value="bricolage"><label for="bricolage" class="bricolage">Bricolage</label><br>
       <input type="radio" name="genre" id="nature" value="nature"><label for="nature" class="legende">Nature</label><br>
       <input type="radio" name="genre" id="photo" value="photo"><label for="photo" class="legende">Photo</label><br>
       <input type="radio" name="genre" id="bd" value="bd"><label for="bd" class="legende">Bande dessinée</label><br>
       <a href="../projet/genre.html" style="text-decoration:none"><input type="radio" name="genre" id="autre" value="autre"><label for="autre" class="legende">Autre...  </label></a ><span class="autre">(cliquez sur "Autre..." si le genre de votre livre ne figure pas dans cette liste)</span>
     </td>
     </tr>
     </table>
   </fieldset>
  </td>
 </tr>  
     
 <tr>  
   <td>
     <input type="reset" name="reset" value="  Tout recommencer  " class="bouton_simple2">
   <input type="submit" name="submit" value="   Valider   " class="bouton_simple" onclick="verifRadio();">
   </td>  
 </tr>  
 </table>
 </form>
 </div>
</body>
</html>
 


 
Merci de bien vouloir m'aider.


Message édité par mimi45 le 03-06-2011 à 10:06:25
Reply

Marsh Posté le 02-06-2011 à 12:49:08   

Reply

Marsh Posté le 02-06-2011 à 14:16:12    

Bon, après bien des recherches, j'ai fait le script suivant pour tester les boutons radio en remplacement de l'autre script :
 

Citation :


<script type="text/javascript" >
 /*Teste les boutons radio :*/
 function verifRadio()
 {
  oui=document.formulaire1.genre[0].checked;
  non=document.formulaire1.genre[1].checked;
  if (oui==false & non==false)
  {
   window.alert("Vous n'avez pas indiqué le genre du livre" );
   return false;
  }
  else
  {
   return true;
  }
 }  
</script>


avec :

Citation :


<form method="post" action="" name="formulaire1" onsubmit="return verifRadio();">


 
ça marche, mais maintenant je ne peux plus valider mon formulaire, ça m'envoie toujours la boite d'alerte à chaque fois que je clique sur valider (le reste de la page html est dans mon post précédent si besoin).
 
Merci de m'aider car je n'y arrive vraiment pas.

Reply

Marsh Posté le 03-06-2011 à 10:04:53    

Re Bonjour,
 
Personne pour m'aider ?
 
Bon, après bien des recherches mes codes évoluent, mais mon formulaire ne se valide toujours pas.
Sur ma page d'enregistrement de livres, j'ai entre autres des boutons radio pour cocher le genre du livre, et un champ de saisie pour entrer le genre au cas où il ne serait pas dans la liste. J'envoie un test JS pour vérifier que mes champs sont remplis. Si l'utilisateur entre le genre du livre par bouton radio et appuie sur "submit", le formulaire se valide normalement. Mais s'il entre le genre du livre par le champ de saisie, l'appui sur "submit" ne valide pas le formulaire (la boite d'alerte se ré-affiche sans arrêt à chaque clic sur "submit" ). Voici 4 jours que je planche dessus, mais sans succès. La console d'erreurs ne me renvoie rien. Si quelqu'un pouvait me donner un coup de main je lui en serais très reconnaissant.
 
Voici le code de la fonction de vérification JS :

Citation :


<script type="text/javascript" >
 /*Teste les boutons radio :*/
 function verifRadio()
 {
  var radio=document.formulaire1.genre;
  var champ=document.formulaire1.autre_genre;
  var rlength=radio.length;
  var oui=false;
  for (var z=0; z<rlength; z++)
  {
   if (radio[z].checked && champ!='')
   {
    oui=true;
   }
  }
  if (oui)
  {
   return true;
  }
  else
  {
   window.alert("Vous n'avez pas indiqué le genre du livre" );
   return false;
  }
 }
</script>


 
Et voici le code de la page entière :

Citation :


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Page enregistrement</title>
 
<link rel="stylesheet" type="text/css" href="./styles.css">
 
<script type="text/javascript" >
 /*Teste les champs de saisie texte :*/
 function test()
  {
   var ok=0;
   if (document.formulaire1.titre.value=='')
   {
    document.formulaire1.titre.value=prompt('Veuillez remplir le champ "Titre" :');
    ok=1;
   }
    if (document.formulaire1.auteur.value=='')
   {
    document.formulaire1.auteur.value=prompt('Veuillez remplir le champ "Auteur" :');
    ok=1;
   }
   if (document.formulaire1.editeur.value=='')
   {
    document.formulaire1.editeur.value=prompt('Veuillez remplir le champ "Editeur" :');
    ok=1;
   }
   if (document.formulaire1.genre.value=='')
   {
    document.formulaire1.genre.value=prompt('Veuillez remplir le champ "Genre" :');
    ok=1;
   }
   if (ok==0)
   {
    return true;
   }
   else
   {
    return false;
   }
  }  
</script>
 
 
<script type="text/javascript" >
 /*Teste les boutons radio :*/
 function verifRadio()
 {
  var radio=document.formulaire1.genre;
  var champ=document.formulaire1.autre_genre;
  var rlength=radio.length;
  var oui=false;
  for (var z=0; z<rlength; z++)
  {
   if (radio[z].checked && champ!='')
   {
    oui=true;
   }
  }
  if (oui)
  {
   return true;
  }
  else
  {
   window.alert("Vous n'avez pas indiqué le genre du livre" );
   return false;
  }
 }
</script>
</head>
 
<body>
 <div>
 <form method="post" action="" name="formulaire1" onsubmit="return verifRadio();">
 <table class="table_form" cellpadding="0" cellspacing="0">
 <caption class="gros_titre">Nouveau livre</caption>
  <tr>
   <td>
    <fieldset>
     <legend class="texte_fieldset">Références du livre</legend>
      <table border="0" cellpadding="0" cellspacing="10">
        <tr>                
         <td class="legende"><label for="titre">Titre&nbsp;:&nbsp;</label></td>
         <td><input name="titre" id="titre" type="text" size="40" class="champ"></td>
        </tr>
     
        <tr>
         <td class="legende"><label for="auteur">Auteur&nbsp;:&nbsp;</label></td>
         <td><input name="auteur" id="auteur" type="text" size="30" class="champ"></td>
        </tr>
         
        <tr>
         <td class="legende"><label for="editeur">&Eacute;diteur&nbsp;:&nbsp;</label></td>
         <td><input name="editeur" id="editeur" type="text" size="30" class="champ"></td>
        </tr>
        <tr>
         <td height="5">&nbsp;</td>        
        </tr>
        <tr>
         <td><input type="reset" name="reset" value="   Recommencer   " class="bouton_simple"></td>
        </tr>
       </table>  
    </fieldset>
     
    <fieldset>
     <legend class="texte_fieldset">Genre</legend>
      <table border="0" cellpadding="0" cellspacing="0">
       <tr>
        <td>
        <input type="radio" name="genre" id="roman" value="roman"><label for="roman" class="legende">Roman</label><br>
        <input type="radio" name="genre" id="informatique" value="informatique"><label for="informatique" class="legende">Informatique</label><br>
        <input type="radio" name="genre" id="sante" value="sante"><label for="sante" class="legende">Sant&eacute;</label><br>
        <input type="radio" name="genre" id="spiritualite" value="spiritualite"><label for="spiritualite" class="legende">Spiritualit&eacute;</label><br>
        <input type="radio" name="genre" id="cuisine" value="cuisine"><label for="cuisine" class="legende">Cuisine</label><br>
        <input type="radio" name="genre" id="bricolage" value="bricolage"><label for="bricolage" class="bricolage">Bricolage</label><br>
        <input type="radio" name="genre" id="nature" value="nature"><label for="nature" class="legende">Nature</label><br>
        <input type="radio" name="genre" id="photo" value="photo"><label for="photo" class="legende">Photo</label><br>
        <input type="radio" name="genre" id="bd" value="bd"><label for="bd" class="legende">Bande dessin&eacute;e</label><br>
        </td>
       </tr>
       
       <tr>
        <td>&nbsp;</td>        
       </tr>
       
       <tr>
        <td class="legende">
         <label for="autre_genre">Autre genre :&nbsp;</label><input type="text" name="autre_genre" id="autre_genre" size="30" class="champ">
        </td>
       </tr>        
       
      </table>
    </fieldset>
     
    <fieldset>
     <legend class="texte_fieldset">Fiche résumé</legend>
     <textarea name="resume" id="resume" rows="20" cols="110" class="champ">Faites ici un court résumé de votre livre</textarea>    
    </fieldset>  
   </td>
  </tr>  
     
  </tr>  
   <td>
   <input type="reset" name="reset" value="  Tout recommencer  " class="bouton_simple2">
   <input type="submit" name="submit" value="   Valider   " class="bouton_simple" onclick="test();">
   </td>  
  <tr>  
 </table>
 </form>
 </div>
</body>
</html>


 
Un grand merci pour votre aide.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed