Validation formulaire avec des boutons radio

Moxostoma
Javascript

Bonsoir, j'ai suivis le tutoriel sur la validation de formulaires avec jquery (sur le site), mais je bloque sur les boutons radio.
J'ai quand même essayer de coder, ça à peu près sauf que si le membre ne sélectionne pas un boutons, il y a l'erreur qui s'affiche, et si, il sélectionne un boutons, l'erreur ne part pas.

Voici comment, j'ai procéder :

$(document).ready(function(){
$("#submit_inscription").click(function() {
var sexe = $("input[name='sexe']:checked").val(); //Les boutons radio
valid = true;
//Sexe
if(sexe == 'homme' || sexe == 'femme')
{
// alert(sexe); //Pour le test, retourne bien "homme/femme"
}
else
{
document.getElementById('erreur_sexe').innerHTML= "Veuillez entrez votre sexe";
valid = false;
}
//Pas touche ici
return valid;
});
//Fin jquery
});

Est les boutons : 

<label for="sexe">Sexe :</label>
       <input type="radio" name="sexe" value="homme" /> <img src="images/homme.gif" />  <strong>Homme</strong>
       <input type="radio" name="sexe" value="femme" /> <img src="images/femme.gif" />  <strong>Femme</strong>

       <span id="erreur_sexe" class="error-message"></span>
      <br />

Exemple : 

if($("#sexe").val() == "") 
{
if($("#sexe").next(".error-message").fadeIn().text("Veuillez entrez votre sexe"));
$("#sexe").css("border-color","#FF0000");
valid = false;
}
else 
{
$("#sexe").next(".error-message").fadeOut();
$("#sexe").css("border-color","#028b00");
}

J'aimerais faire comme dans le tutoriel, mais comme, il n'y a pas de $("#machin").val() , je suis perdu...

Merci, d'avance. :)

4 réponses

golendercaria
Réponse acceptée

Oui bien sur, si tu utilises mon exemple brut comme sa, tu n'obtiendra aucun résultat.
Il faut comprendre l'exemple.

Je part de ton exemple.

<form method="post" action="azerty.php" id="form_inscription">

    <fieldset>
  <label for="sexe">Sexe :</label>
       <input type="radio" name="sexe" value="homme" /> <img src="images/homme.gif" />  <strong>Homme</strong>
       <input type="radio" name="sexe" value="femme" /> <img src="images/femme.gif" />  <strong>Femme</strong>

       <span id="erreur_sexe" class="error-message"></span>
      <br />
   </fieldset>

    <p>
       <input type="submit" id="submit_inscription" value="Valider mon inscription" /> </p>

</form>

Et j'ai remodifier le script 

//Page charger
    $(function(){
        //ont definis un tableau d'erreur (pour l'exemple un simple variable) qu'on definis a vrai
        // -> on par toujour du principe que le formulaire est faux
        var error_sexe = true;
        //fonction qui va verifier tout le formulaire
        function validForm(){
            //on definis l'erreur a vrai -> donc le form est faut quoi XD
            error_sexe = true;
            //ici tu réadapte le code en fonction de ton ID ou de ta classe
            var sexe = $('input:radio:checked').val();
            if((sexe == 'femme') || (sexe == 'homme')){
                error_sexe = false;
                //petit test de la valeur sexe -> donc sa marche bien.
                console.log(sexe);
            }else{
                error_sexe = true;
                //on bloq l'envois
                return false;
            }
            //imaginont que tu as plusieur test si tu n'as pas eut de return false tu peux envoyez
            //mais n'oublis pas que tu peux utiliser aussi ton tableau d'erreur
            //donc on va requeter dans le cas de la premier solution
            /*

                    AJAX ICI -> vers page_de_traitement.php

            */
        }
        //on place un eventhandler -> sa evite de stopper le click du bouton je prefere
        $('#submit_inscription').bind('click',validForm);
    });

Pour moi sa fonctionne. Tu peux meme placer un return false aprés la console pour stop le script comme sa tu vois les valeurs.
Bon travail.

golendercaria

C'est qu'au moment de la validation tu ne réinitialise pas la variable erreur_sexe.
Tu as un bouton de validation et au clique tu lances un fonction de test (et tu vide les erreurs).

//Page charger
    $(function(){
        //ont definis un tableau d'erreur (pour l'exemple un simple variable) qu'on definis a vrai
        // -> on par toujour du principe que le formulaire est faux
        var error_sexe = true;
        //fonction qui va verifier tout le formulaire
        function validForm(){
            //on definis l'erreur a vrai -> donc le form est faut quoi XD
            error_sexe = true;
            var sexe = $('input:radio:checked').val();
            if((sexe == 'femme') || (sexe == 'homme')){
                error_sexe = false;
            }else{
                error_sexe = true;
            }
            //tu test le tableau d'erreur avant de requeter le serveur
            if(error_sexe === false){
                //$.ajax.....
            }
        }
        //on place un eventhandler -> sa evite de stopper le click du bouton je prefere
        $('#btValidation').bind('click',validForm);
    });

Oublis pas aussi qu'avec Json tu peux effectuer certains test coter serveur.
Et un conseil, utilise les notations jquery dans tous le script tu gagneras du temps.

Moxostoma
Auteur

Merci, mais votre code ne marche pas où c'est moi qui ne comprend pas :/
Le formulaire s'envoie même si l'utilisateur n'a pas choisis un boutons.

<form method="post" action="azerty.php" id="form_inscription">
    <fieldset>
  <label for="sexe">Sexe :</label>
       <input type="radio" name="sexe" value="homme" /> <img src="images/homme.gif" />  <strong>Homme</strong>
       <input type="radio" name="sexe" value="femme" /> <img src="images/femme.gif" />  <strong>Femme</strong>

       <span id="erreur_sexe" class="error-message"></span>
      <br />
   </fieldset>

    <p>
       <input type="submit" id="submit_inscription" value="Valider mon inscription" /> </p>
</form>

Est le script : 

//Page charger
$(function(){
    //ont definis un tableau d'erreur (pour l'exemple un simple variable) qu'on definis a vrai
    // -> on par toujour du principe que le formulaire est faux
    var error_sexe = true;
    //fonction qui va verifier tout le formulaire
    function validForm(){
        //on definis l'erreur a vrai -> donc le form est faut quoi XD
        error_sexe = true;
        var sexe = $('input:radio:checked').val();
        if((sexe == 'femme') || (sexe == 'homme')){
            error_sexe = false;
        }else{
            error_sexe = true;
        }
        //tu test le tableau d'erreur avant de requeter le serveur
        if(error_sexe === false){
            //$.ajax.....
            $.ajax({ 
            success: function(msg){
            alert(sexe); //test
            }
            });
return false; 
        }
    }
    //on place un eventhandler -> sa evite de stopper le click du bouton je prefere
    $('#submit_inscription').bind('click',validForm);
});
Moxostoma
Auteur

J'ai tout finis :D
Les vérifications sur le formulaire fonctionne correctement, et l'enregistrement aussi.
Mais comment, faire une redirection sur la page index.php, en mettant un texte "Bienvenue sur le site 'Prénom'", dans une div avec une croix pour fermer la div ? C'est possible comme ça ?

Merci, d'avance.