[Résolu] Formulaire : vérification radio

Bonjour à toutes et tous,

je me retrouve bloquer avec le code de mon formulaire concernant la vérification des champs RADIO. Ca fonction très bien avec les champs Texte mais pas avec les boutons Radio et Select

Pouvez-vous m'aiguiller car je bloque sérieusement depuis hier soir et j'en viens à requérir de l'aide ?

Merci d'avance pour votre temps et votre aide !

Voici le code de mon script :

<script>
$().ready(function() {
  // validate the form when it is submitted
  var validator = $("#template-contactform").validate({
    errorPlacement: function(error, element) {
      // Append error within linked label
      $( element )
        .closest( "form" )
          .find( "label[for='" + element.attr( "id" ) + "']" )
            .append( error );
    },


    errorElement: "span",
    messages: {
      civilite: {
        required: " (obligatoire)"
      },
      nom: {
        required: " (obligatoire)"
      },
      prenom: {
        required: " (obligatoire)"
      },
      fonction: {
        required: " (obligatoire)"
      },
      session: {
        required: " (obligatoire)"
      },
      email: {
        required: " (obligatoire)"
      }
    }
  });
  $(".cancel").click(function() {
    validator.resetForm();
  });
});
</script>

Et celui de mon formulaire :

 
<form class="nobottommargin contactform" id="template-contactform" name="template-contactform" action="confirmation.php" method="post">
            <div class="form-process"></div>
                   <label for="civilite" style="display:block;">Civilité <small>*</small></label>
                        <label class="radio horizontal">
                            <input type="radio" name="civilite" value="Madame" class="horizontal">
                            &nbsp; Madame
                        </label>
                        <label class="radio horizontal">
                            <input type="radio" name="civilite" value="Monsieur" class="horizontal">
                            &nbsp; Monsieur
                        </label>
                        <label class="radio horizontal">
                            <input type="radio" name="civilite" value="Mademoiselle" class="horizontal">
                            &nbsp; Mademoiselle
                        </label>

                  <label for="nom">Nom <small>*</small></label>
                  <input type="text" id="nom" name="nom" value="nom" class="sm-form-control required" />

etc...

Donc cela fonctionne pour le champ NOM mais pas pour CIVILITE.

Ca parle sûrement à quelqu'un non ?

Bien entendu je sais développer ce type de code :

for(i=0;i<document.contactform.frequence.length;i++)
{
if(document.contactform.frequence[i].checked == true)
{
var frequence = 1;
break;
}
else
{
var frequence = 0;
}
}
if(frequence == 0)
{alert("Veuillez choisir la frequence des visites !");
return false;}

Mais je ne voudrais intégrer la vérification dans le code actuel du site, et ne pas avoir un message d'erreur pour les champs Texte et une alerte popup pour les champs Radio

Encore merci d'avance.[/i]
Modifié par DaTongue (03 Sep 2015 - 16:50)

Nobody to help me?

Re-bonjour, je désespère un peu de trouver une solution. J'ai essayé tout type de configuration différente mais rien n'y fait :

<script>
$().ready(function() {
  // validate the form when it is submitted
  var validator = $("#template-contactform").validate({
    errorPlacement: function(error, element) {
      // Append error within linked label
      $( element )
        .closest( "form" )
          .find( "label[for='" + element.attr( "id" ) + "']" )
            .append( error );
    },

    errorElement: "span",
    messages: {
      nom: {
        required: " (obligatoire)"
      },
      prenom: {
        required: " (obligatoire)"
      },
      fonction: {
        required: " (obligatoire)"
      },
      session: {
        required: " (obligatoire)"
      },
      email: {
        required: " (obligatoire)"
      },
       if($("#civilite:checked").length < 1) {
         required: " (obligatoire)"
      }
    }
  });
  $(".cancel").click(function() {
    validator.resetForm();
  });
});
</script>

Une idée pour m'aider à faire marcher ce foutu champ Civilité ?

Salut,
Difficile de t'aider car nous ne savons pas d'où sort cette fonction .validate(), c'est pas natif à jQuery. Ou encore .resetForm() ? Que veux-tu comme comportement, une vérification au submit ?
D'ailleurs, ton appel à jQuery me semble étonnant :

$().ready(function() {
  //ton code
});

C'est plus habituel d'avoir ça :

$(function() {
  //ton code
});

Salut et merci pour ta réponse mais en effet il s'agit d'un js spécifique qui fait juste plus de 1000 lignes donc j'espérais ne pas avoir à le poster...
Sauf qu'en attendant je viens de m'apercevoir que si j'ajoute pas required au niveau des input radio ca ne peut pas fonctionner ! Plus de 24h que je suis dessus, envie de pleurer tellement c'était sous mes yeux