11489 sujets

JavaScript, DOM et API Web HTML5

La propriété checked du checkbox ne fonctionne pas

Bonjour!
J'ai fai un formulaire d'inscription pour mon site perso et j'ai prévu un checkbox pour accepter les condititions d'utilisation. Cependant les événement d'écris dans JQuery ne fonctionne pas comme je veux.
1. Je voudrais que, quand on clique sur submit, si la case des conditions n'est pas coché, qu'il n'envoie pas le formulaire et qu'il affiche un message d'erreur en rouge.

2. Lorsuqu'on décoche la case qu'il affiche un message d'erreur en rouge en indiquant que veuillez accepter les conditions d'utilisation en cochant cette case.

Voici ce que j'ai fait

Partie HMTL de mon check box

<p id="agree">
	<label for="accepter">Conditions d'utilisation <sup><img src="images/asterisk.gif"/></label>
	<input type="checkbox" id="accepter"/> <span class="erreur"> </span>
</p>

Voici le code JQuery du Bouton SUBMIT

   		if($('#accepter').attr(':checked', false)){
			$('#accepter').css('border-color','#ff0000');
			$('#accepter').next('.erreur').fadeIn('slow').text('Accepter les conditions d\'utilisation en cochant cette case.');
			etat = false;
		}		
		//$('#accepter').Onclick(function(){
		if($('#accepter').is('checked')){
			$('#accepter').css('border-color','#00ff00');
			$('#accepter').next('.erreur').fadeOut();
			etat = true;
		}


Le code JQuery de l'événement Click sur la case


$('#accepter').Onclick(function(){
		if($('#accepter').is('checked')){
			$('#accepter').css('border-color','#00ff00');
			$('#accepter').next('.erreur').fadeOut();
			etat = true;
		}
		
		if($('#accepter').attr(':checked', false)){
			$('#accepter').css('border-color','#ff0000');
			$('#accepter').next('.erreur').fadeIn('slow').text('Accepter les conditions d\'utilisation en cochant cette case.');
			etat = false;
		}
		return etat;
	});



portion du code css



.erreur{
	color:#ff0000;
	text-align: left;
	font-size:15px;
	padding: 0 0 0 15px;
	display: none;
	position: absolute;
	width:200px;
}

#agree .erreur{
	color:#ff0000;
	text-align: center;
	font-size:15px;
	display: none;
	position: absolute;
	width:400px;
}


Et bien ce code est bizzarement anormal.

Merci pour votre aide.

Où se trouve le problème, please!
Voici comment moi je gèrerai ton cas, je n'ai fait que la fonction au click, mais l'idée est la même pour ton bouton submit.

Déjà, je ne raffole pas d'ajouter du html via le script, je préfère qu'il soit dans la page et masqué par .css (c'est un goût personnel ^^).
Mon code HTML est donc le suivant :

<p id="agree">
	<label for="accepter">Conditions d'utilisation <sup><img src="images/asterisk.gif"/></label>
	<input type="checkbox" id="accepter"/>
	<span class="erreur hidden">Accepter les conditions d'utilisation en cochant cette case</span>
</p>


J'ajoute un petit peu de .css (parce que par goût personnel là encore, je ne raffole pas du css ajouté par script Smiley cligne ) :

<style>
	.hidden{display:none;}
	.erreur{color:#F00;}
</style>


Et donc, la fonction .js qui, au click, va contrôler si la case est cochée ou non, et afficher ou non le span avec le message d'erreur :

<script type="text/javascript">
$(window).load(function () {
	$('#accepter').click(function(){
		if($('#accepter:checked').length > 0){
			//case cochée
			$('.erreur').addClass('hidden');
		} else {
			//case non cochée
			$('.erreur').removeClass('hidden');
		}
	});
});
</script>


A toi d'adapter à tes besoins.
Manu
Sujet clos
Aller à