[Résolu] Validation champs formulaire Jquery checkbox - radio

Bonsoir,

Je réalise actuellement un site en php avec base de données avec formulaire.
Je fais une double validation lors de l'envoi du formulaire: côté client en javascript et côté serveur en php avant insertion dans la base de donnée.

Pour mon formulaire je souhaite utiliser le Jquery pour valider les champs. J'ai fait un premier test avec un formulaire simplifié et je rencontre un problème:
J'ai des checkbox et radio et il faut qu'au moins une (sur le total) soit cochée (sinon j'affiche erreur).
J'arrive à traiter les checkbox et radio séparément mais pas l'ensemble.

voici le formulaire simplifié (nb: la mise en forme n'est pas terrible mais ce n'est pas ma priorité pour le moment)
"formulaire.php":

$affichage .= '
<form name="formulaire" method="POST" action="formulaire.php" class="form">
<h2> Formulaire  </h2><br />
<table id="tableau" >
 <th colspan="4"  height="50px">Identité</th>
    <tr>
        <td>Nom:</td>
        <td> <input type="text" name="nom" id="nom"><span class="ErrorMess">Erreur</span></td>

          <td> <label>Date :</label> </td>
        <td> <input type="text" id="datepicker"><span class="ErrorMess">Erreur</span> </td>
    </tr>

    <tr>
        <td> <input type="checkbox" name="tel" value="1" id="tel"><span class="ErrorMess">Erreur</span> </td>
        <td> Tel </td>

        <td> <input type="checkbox" name="mail" value="1" id="mail"></td>
        <td> Mail </td>
        <td></td>
    </tr>
    <tr>
        <td colspan="4" height="30px"> choix :</td>
    </tr>
    <tr>
        <td > <input type="radio" name="choix" value="2" id="choix1" ></td>
        <td> choix1</td>
        <td> <input type="radio" name="choix" value="4" id="choix2"></td>
        <td> choix2</td>
    </tr>
     <tr >
        <th colspan="4" height="60px" align="center" > <input type="submit" value="Valider"name="submit" id="valider"></th>
      </tr>
</table>
</form >';

Voici maintenant le début de la partie jQuery :

 
<script type="text/javascript">
   $(document).ready(function() {
         $("#valider").click(function(){
            valid = true;
            if($("#nom").val() == ""){
                $("#nom").next(".ErrorMess").fadeIn().text("Veuillez entrer le nom");
                valid = false;
            }
            else if (!$("#nom").val().match(/^[a-z-\']+$/i)){
                 $("#nom").next(".ErrorMess").fadeIn().text("nom invalide");
                valid = false;
            }
            ...
            
 return valid;
            
     });
    });
     </script>

Je n'ai pas mis tout le code car il est quasi identique pour le nom, prénom... et cela fonctionne bien.
Par contre j'ai essayé de travailler avec "si checkbox ou radio est checked alors "

 
if($('#checkbox').is(':checked') ||  $("input").is(':checked')){
$("#checkbox").val == "" &&  $("#radio").val == "" {
}
});

Mais c'est de l'ordre du bidouillage..

Pouvez vous m'aider?
Et peut être me dire si je pars dans un truc trop compliqué alors qu'il y a une solution bien plus simple?

Merci d'avoir lu!
Modifié par biscott' (31 Aug 2010 - 16:11)

Salut,

Tu peux ajouter une condition du type :

if($(':checked').length == 0) { ... }

pour vérifier qu'une des cases à cocher ou un des boutons radio a bien été coché.

Sinon, il vaut mieux, de base, mettre ta variable "valid" à "false" et ne la passer à "true" que si tous les tests passent. De même, il serait préférable que cette variable ne soit pas globale mais locale.

Par ailleurs, il serait judicieux de faire tes tests au submit du formulaire et non au clic sur le bouton "valider".

Salut Koala64!

Cela me tracassait cette histoire de

if($(':checked').length == 0) { ...} 

qui ne fonctionnait pas pour moi.

J'ai tout repris du début étape par étape pour trouver ou cela clochait... j'ai une balise select
A force d'avoir le nez sur le code je ne la voyais même plus.
Bon je n'ai pas encore la solution mais au moins j'ai mis un nom sur mon problème!
Vu l'heure je continuerai demain mais je te remercie!
J'avance grâce à toi et tout le reste du script fonctionne parfaitement.

Biscott'

Bonjour!

(oui je sais ça fait un peu monologue )
J'ai finalement réussi à valider complètement mon formulaire, ça donne ceci:

 
   $(document).ready(function() {
        $(".form").submit(function(){
          var  valid = false;

            if($("#nom").val() == "") {
                // Affichage de l\'erreur
                $("#nom").next(".ErrorMess").fadeIn().text("Veuillez entrer le nom");
            }
            else if(!$("#nom").val().match(/^[a-z-\']+$/i)){
                     $("#nom").next(".ErrorMess").fadeIn().text("nom invalide");
            }
            else if($("#prenom").val() == ""){
                    $("#prenom").next(".ErrorMess").fadeIn().text("Veuillez saisir le prénom");
            }
            else if(!$("#prenom").val().match(/^[a-z-\']+$/i)){
                     $("#prenom").next(".ErrorMess").fadeIn().text(" prénom invalide");
            }
            else if($("#datepicker").val() == ""){
                    $("#datepicker").next(".ErrorMess").fadeIn().text("Veuillez saisir la date");
            }
            else if($("#select").val() == "Veuillez choisir"){
                    $("#departarriv").next(".ErrorMess").fadeIn().text("Veuillez faire un choix");
           }
           else if($("input:checked").length == 0){
                    $("#choix").next(".ErrorMess").fadeIn().text("Veuillez cocher au moins une case");
            }
            else { // Tous les tests ont réussi

                valid = true;
            }
              return valid;
     });
    });

Je pense que cette fois ci je n'oublie rien, je place donc ce suejt en résolu.
Merci!