Validation bouton radio

Question

actarus44

3 May 2011 à 10:55

Bonjour,

Je suis en train de faire un petit formulaire avec validation des éléments via jQuery.

Jusqu'ici tout va bien malheureusement j'ai deux boutons radio et là les choses se compliquent Smiley decu

La validation des imputs type texte fonctionne à merveille mais dès que j'essaie de valider les radios le submit se fait directement et passe outre les autres validations.

Ca serait merveilleux si quelqu'un pouvait me donner un petit coup de pouce Smiley cligne

D'avance merci !!!!

Le form HTML


<form id="contact" action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="post" class="inlineRadios">
                    
                    <span class="mistake_nom"></span>
                    <span class="mistake_prenom"></span>
                    <span class="mistake_radio"></span>
                    
                    	<div id="form-l">
                    	<label for="nom">votre nom:</label>
                        <div class="purple_box">
                        <input type="text" name="nom" id="nom" tabindex="1" title="*Nom" value="*Nom" />
                        </div>
                        </div>
                        <div id="form-r">
                    	<label for="prenom">votre pr&eacute;nom:</label>
                        <div class="purple_box">
                        <input type="text" name="prenom" id="prenom" tabindex="2" title="*Pr&eacute;nom" value="*Prénom" />
                        </div>
                        </div>
                        <div class="clear"></div>
                        <label for="message">votre message:</label>
                        <div class="purple_box">
                        <textarea name="message" id="message" tabindex="3" title="Message" wrap="virtual"></textarea>
                        </div>
                        
                        <label for="present" tabindex="4">sera pr&eacute;sent</label>
                        <input type="radio" name="presence" id="present" value="oui" />

						<label for="pas_present" tabindex="5">ne sera pas pr&eacute;sent</label>
						<input type="radio" name="presence" id="pas_present" value="non" />

                        <input name="envoyer" type="submit" id="alert" class="form-btn" tabindex="6" value="" />
                    </form>

et le JS:


$(function(){
			
			function verifNom(){
				var valid = true;
				var $nom_val = $("#nom");
				var $span_nom = $(".mistake_nom");
				
				if ($nom_val.val()=="" || $nom_val.val()=="*Nom") {
					$span_nom.add(".mistake_nom").fadeIn(500).text("Veuillez entrer un nom");
					$span_nom.css({
						"display":"block",
						"margin-bottom":"6px"
					});
					valid = false;
				} else {
					$span_nom.add(".mistake_nom").slideUp();
					
				}
				
				return valid;
			}
 
			function verifPrenom(){
				var valid = true;
				var $prenom_val = $("#prenom");
				var $span_prenom = $(".mistake_prenom");
 
				if ($prenom_val.val()=="" || $prenom_val.val()=="*Prénom") {
					$span_prenom.add(".mistake_prenom").fadeIn(500).text("Veuillez entrer un prénom");
					$span_prenom.css({
						"display":"block",
						"margin-bottom":"6px"
					});
					valid = false;
				} else {
					$span_prenom.add(".mistake_prenom").slideUp();
					
				}
				
				return valid;
			}
			
			
			function verifRadio(){
				var valid = true;
				var $span_radio = $(".mistake_radio");
 
				if ( ( document.contact.presence[0].checked == false ) && ( document.contact.presence[1].checked == false ) ) {
					$span_radio.add(".mistake_radio").fadeIn(500).text("Veuillez cocher une case");
					$span_radio.css({
						"display":"block",
						"margin-bottom":"6px"
					});
					valid = false;
				} else {
					$span_radio.add(".mistake_radio").slideUp();	
				}
				return valid;
			}

			
 			$("#contact").submit(function(){
				var valid = verifNom();	
				valid = verifPrenom();
				valid = verifRadio();
				
				
				return valid;
			});
			
			$("#nom").blur(function() {
				verifNom();
			});
			
			$("#prenom").blur(function() {
				verifPrenom();
			});
			$("document.contact.presence").blur(function() {
				verifRadio();
			});
			
		});

~~supprimé~~

3 May 2011 à 12:06

Regarde tes messages d'erreurs Javascript : document.contact is undefined.

actarus44

3 May 2011 à 12:18

Ouais j'ai testé plein plein de choses mais rien ne fonctionne et oui en effet c'est undefined mais comment corriger ceci ? Smiley confus

Je comprend pas ce qui doit être défini pour les radios...
Modifié par actarus44 (03 May 2011 - 12:23)

actarus44

3 May 2011 à 14:39

Alors j'ai changé quelques éléments et maintenant la validation est active mais quand je coche une des 2 radios la validation reste toujours bloquée.


$(document).ready(function() {
			
			function verifNom(){
				var valid = true;
				var $nom_val = $("#nom");
				var $span_nom = $(".mistake_nom");
				
				if ($nom_val.val()=="" || $nom_val.val()=="*Nom") {
					$span_nom.add(".mistake_nom").fadeIn(500).text("Veuillez entrer un nom");
					$span_nom.css({
						"display":"block",
						"margin-bottom":"6px"
					});
					valid = false;
				} else {
					$span_nom.add(".mistake_nom").slideUp();
					
				}
				
				return valid;
			}
 
			function verifPrenom(){
				var valid = true;
				var $prenom_val = $("#prenom");
				var $span_prenom = $(".mistake_prenom");
 
				if ($prenom_val.val()=="" || $prenom_val.val()=="*Prénom") {
					$span_prenom.add(".mistake_prenom").fadeIn(500).text("Veuillez entrer un prénom");
					$span_prenom.css({
						"display":"block",
						"margin-bottom":"6px"
					});
					valid = false;
				} else {
					$span_prenom.add(".mistake_prenom").slideUp();
					
				}
				
				return valid;
			}
			
			
			function verifRadio(){
				var valid = true;
				var $radio_val = $('input:radio[name=presence]:checked').val();
				var $span_radio = $(".mistake_radio");

				if(($radio_val != "oui") || ($radio_val != "non")) { 
					$span_radio.add(".mistake_radio").fadeIn(500).text("Veuillez cocher une case");
					$span_radio.css({
						"display":"block",
						"margin-bottom":"6px"
					});
					valid = false;
				} else {
					$span_radio.add(".mistake_radio").slideUp();	
				}
				return valid;
			}

			
 			$("#contact").submit(function(){
				var valid = verifNom();	
				valid = verifPrenom();
				valid = verifRadio();
				
				
				return valid;
			});
			
			//Enleve les erreures une fois corigée
			$("#nom").blur(function() {
				verifNom();
			});
			
			$("#prenom").blur(function() {
				verifPrenom();
			});
			$('input:radio[name=presence]:checked').blur(function() {
				verifRadio();
			});
});

Modifié par actarus44 (03 May 2011 - 14:42)

Natha

10 Jun 2011 à 01:40

Bonjour,

Il faut que tu remplaces ça :

if(($radio_val != "oui") || ($radio_val != "non")) {

Par ça :

if(($radio_val != "oui") && ($radio_val != "non")) {

actarus44

14 Jul 2011 à 18:23

J'ai modifier le script et maintenant tout fonctionne, enfin presque...

Voici le nouveau script:


$(function(){
			
			function verifNom(){
				var valid = true;
				var $nom_val = $("#nom");
				var $span_nom = $(".mistake_nom");
				
				if ($nom_val.val()=="" || $nom_val.val()=="*Nom") {
					$span_nom.add(".mistake_nom").fadeIn(500).text("Veuillez entrer un nom.");
					$span_nom.css({
						"display":"block",
						"margin-bottom":"4px"
					});
					valid = false;
				} else {
					$span_nom.add(".mistake_nom").slideUp();
					
				}
				
				return valid;
			}
 
			function verifPrenom(){
				var valid = true;
				var $prenom_val = $("#prenom");
				var $span_prenom = $(".mistake_prenom");
 
				if ($prenom_val.val()=="" || $prenom_val.val()=="*Prénom") {
					$span_prenom.add(".mistake_prenom").fadeIn(500).text("Veuillez entrer un prénom.");
					$span_prenom.css({
						"display":"block",
						"margin-bottom":"4px"
					});
					valid = false;
				} else {
					$span_prenom.add(".mistake_prenom").slideUp();
					
				}
				
				return valid;
			}
			
			
			function verifRadio(){
				var valid = true;
				var $span_radio = $(".mistake_radio");
				
				if($('input[type=radio][name=presence]:checked').length==0) { 
					$span_radio.add(".mistake_radio").fadeIn(500).text("Veuillez cocher une case.");
					$span_radio.css({
						"display":"block",
						"margin-bottom":"21px"
					});
					valid = false;
				} else {
					$span_radio.add(".mistake_radio").slideUp();	
				}
				return valid;
			}

			
 			$("#contact").submit(function(){
				var valid = (verifRadio(), verifNom(), verifPrenom());
				return valid;
			});
			
			
			//Enleve les erreures une fois corigée
			$("#nom").blur(function() {
				verifNom();
			});
			
			$("#prenom").blur(function() {
				verifPrenom();
			});
			
			$('input[type="radio"]').blur(function() {
				verifRadio();
			});
			
});

J'ai juste un problème maintenant avec ce petit bout, enfin je crois que c'est ce bout qui est le problème?


$("#contact").submit(function(){
				var valid = (verifRadio(), verifNom(), verifPrenom());
				return valid;
			});

Je m'explique; si je clic sur sur submit => "Envoyer" dirrectement il m'affiche bien les messages d'erreurs mais si je remplis le champ Prénom sans remplir les autres inputs il envoie le formulaire sans aucunes validations.

et si je modifie l'ordre des "var valid =" et que je mets verifNom() en dernier le problème et le même mais avec le nom cette fois si et plus le prénom...

J'ai l'impression que c'est parce que le dernier élément de la ligne et "valid" alors tout les autres le sont aussi. Il ne prend plus en compte verifRadio et verifNom.

J'espère avoir été suffisamment explicite Smiley confus

Sujet clos