11548 sujets

JavaScript, DOM et API Web HTML5

Comment mettre une condition sur un bouton radio ?

Bonjour,

J'ai fait un formulaire avec vérification des champs avec Formvalidator (jQuery) et ça fonctionne. Cependant j'ai 2 boutons radio ("oui" et "non") pour faire accepter les conditions générales. Quand on clique sur "oui" on "non" le formulaire se valide et je voudrais lui imposer une condition supplémentaire, pour valider le formulaire il faut :
- qu'un bouton radio soit sélectionné
- et que le bouton sélectionné soit le "oui"

mes 2 boutons radio : [/code]

<span><input class="validate[required, funcCall[validatecg]] radio1" type="radio" name="acceptation" value="oui" id="oui" tabindex="90"/> <label for="oui">Oui</label></span>
<span><input class="validate[required, funcCall[validatecg]] radio2" type="radio" name="acceptation" value="non" id="non" /> <label for="non">Non</label></span>


J'ai essayé ça mais ça marche pas, il ne valide plus rien :

[code=javascript]
function validatecg(){ 
   if($("#acceptation").val() =="oui" { 
    return true; 
   }else{ 
    return false; 
   } 
  }


je m'y connais pas trop en js. Une idée ou une solution tout simple ?
Merci
Ile me semble que $("#acceptation") utilise l'id de ton input, or tes inputs radio ont pour id "oui" et "non".
Ton id doit être "acceptation", mais attention, mettre 2 id similaires... ce n'est pas valide W3C!
Modifié par JuJu57 (05 Jul 2010 - 10:22)
j'ai changé l'id mais ça ne change rien Smiley decu

j'ai un message "choisir une option" quand aucun bouton n'est sélectionné mais dès que j'en sélectionne un (peu importe lequel) le formulaire est validé


 function validatecg(){ 
   if($("#acceptation").val() =="oui"){ 
    return true; 
   }else{ 
    return false; 
   } 
  }


et mon formulaire :

<span><input class="validate[required, funcCall[validatecg]] radio1" type="radio" name="cg" value="oui" id="acceptation" tabindex="90"/> <label for="oui">Oui</label></span>
<span><input class="validate[required, funcCall[validatecg]] radio2" type="radio" name="cg" value="non" id="refus" /> <label for="non">Non</label></span>
Salut,

La valeur de l'input est toujours oui, qu'il soit coché ou non Smiley cligne
Il faut utiliser le sélecteur checked (coché):
function(){
    //return $("#acceptation:checked").val() === "oui";
    return $("#acceptation:checked").length !== 0;
}
j'ai oublier de lui donner le nom "validatecg", mais sinon tu peux mettre le partie du code où tu utilise la fonction ?
j'avais mis le nom de la fonction mais ça ne fonctionne pas
je pense que le problème doit venir du validateur jQuery.

Y a pas moyen valider le bouton autrement ? je suis totalement dans le brouillard...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>PromoVIP</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="description" content="">
		<meta name="keywords" content="">
		<meta name="Classification" content="">
		<meta name="REVISIT-AFTER" content="15 days">
		<meta name="Robots" content="follow,index">
		<meta name="copyright" content="&copy; Copyright Graphiknow 2010 ">
		<meta name="distribution" content="global">
		
<link href="site.css" rel="stylesheet" type="text/css">
<link href="css/skin.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css" media="screen" charset="utf-8" />

	<script src="js/jquery.js" type="text/javascript"></script>	
	<script src="js/jquery.validationEngine-fr.js" type="text/javascript"></script>  
	<script src="js/jquery.validationEngine.js" type="text/javascript"></script> 
	<script type="text/javascript" src="ibox/ibox.js"></script>
	<script type="text/javascript">iBox.setPath('ibox/');</script>
	<script type="text/javascript" src="js/jquery.jcarousel.min.js"></script>

<script type="text/javascript">
$(document).ready(function() { 
 $("#formID").validationEngine() 
})

function validatecg(){
    //return $("#acceptation:checked").val() === "oui";
    return $("#acceptation:checked").length !== 0;
} 

</script>
En JavaScript peut être, tu fais un submit du formulaire lors du onclick de l'input radio "acceptation" ?

<input class="validate[required, funcCall  ] radio1" type="radio" name="cg" value="oui" id="acceptation" tabindex="90" onclick="monForm.submit();" />


Mais pour revenir au problème initial, a quel moment est appelée la fonction validatecg() ?
Juju57, je comprends pas ce que tu veux faire en javascript et comment ça va me dire si mon bouton radio est sélectionné et "oui" en même temps.

pour en revenir au problème initial : j'utilise un script jQuery pour vérifier les champs du formulaire http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/ et il y a possibilité de faire des champs personnalisés, ce que j'essaye de faire... en vain Smiley decu

comme j'y arrive pas je ne sais plus quoi faire pour contourner le problème.
merci
<span><input class="validate[required,funcCall[validatecg]] radio" type="radio" name="cg" value="oui" id="acceptation" tabindex="90"/> <label for="acceptation">Oui</label></span>
<span><input class="validate[required] radio" type="radio" name="cg" value="non" id="refus" /> <label for="refus">Non</label></span>

Il faut donner le nom de la focntion à funcCall et ne pas mettre s'espace après les virgule (ça faut le deviner, c'est en regardant les source que j'ai comprit Smiley biggol )
Au passage tu avais oublier de changé l'attribut for des labels.

Et pour que ça marche il faut ajouter dans le fichier "jquery.validationEngine-fr.js" la règle validatecg.

"validatecg":{
	"nname":"validatecg", //nom de la fonction
	"alertText":"le message"}
}

À mettre à la suite des autres règles (et ne pas oublier la virgule qui les séparent).

EDIT : normalement c'est "[required,funcCall[ validatecg]]" et sans l'espace (le fofo supprime le text sinon...)
Modifié par jo_link_noir (05 Jul 2010 - 20:01)
Merci jo_link_noir ! Smiley smile
j'ai bidouillé 2-3 trucs et c'était bon et nickel !

tu m'as bien aidé sur ce coup là, j'ai cru que je n'y arriverais pas avec cette fonction.
merci bien
bonne soirée
Sujet clos
Aller à