11540 sujets

JavaScript, DOM et API Web HTML5

Formulaire avec validation en jquery

Bonjour à tous,

je débute en jquery et j'essaie de faire un formulaire de contact avec une validation en jquery.
Mais j'ai un petit problème :
Voici mon formulaire HTML, un champ nom et un bouton valider.

Nom : <input type="text" id="nom" />
<div class="error"></div>
<input type="submit" id="envoyer" />




jQuery(function($){ 

        var nom = $("#nom");
        valid = true; 
/* je verifie que le champs n'est pas vide et j'applique une classe et j'affiche la div error*/
        $("#nom").blur(function(){
                                if($("#nom").val() == ""){
                                        nom.next(".error").show().text("Le champ Nom  est obligatoire "); 
                                        nom.addClass("border2");
                                        valid = false;
                                }
                                else { valid = true }
        }); 
/* je supprime la classe quand la personne tape un nom */
        nom.keyup(function(){
                if(!nom.val() == ""){
                nom.next(".error").hide().text("Le champ Nom  est obligatoire "); 
                nom.removeClass("border2");
                valid = true;
                }
                else { valid = false}

        });
        return valid;

Et c'est la que ca fonctionne plus. Mon formulaire fonctionne si la personne sort du champ nom sans rien taper l'erreur s'affiche. Mais il faut que je vérifie aussi lorsque la personne clique sur le bouton envoyer et c'est la que ca fonctionne plus Smiley decu
Je pense donc que ma fonction qui vérifie la variable valid n'est pas correcte

        $("#envoyer").click(function(){
                if(valid == true)
                        return true 
                else
                        return false 
        });
});

Si qqun a une petite idée, j'en serai ravi.

Merci à tous
2 soucis qui font que ton script ne va pas à mon avis :

1 : si il clique directement sur le bouton, sans rien toucher, ton formulaire est validé sans soucis ?
2 : si la personne fait "entrer", l'action d'envoyer n'est pas vérifié.

Pour le soucis 1 : c'est un soucis de fond, à toi de voir ... (l'idéal étant d'analyser tous les champs à ce moment là, en plus)
Pour le soucis 2 : utilise $("#id_formulaire").submit(); et non click(); sur le bouton submit. Au moins que tu cliques ou que tu fasses entrer, le JS sera lancé. http://api.jquery.com/submit/
Salut,

je te propose ce script si ca peut t'aider a avancer:


<!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" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>	
	<style type="text/css">.error{border:1px solid red}</style>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){ 
		
			// Verification du champs Pseudo en cas de changement de la valeur
                        $("#name").change( function(){

				var x = $(this).val().length;
				$("#error").empty().removeClass("error");
			
				if(x<4){
					
					if(x==0){
						$(this).empty();
					}else{
						$("#error").append("Ce pseudo est trop court!").addClass("error");
					}
					
				}
				
			});


                        // Verification du champs Pseudo a l'envoi du formulaire
			$("form").submit(function(){
			
				var x = $("#name").val().length;
				
				if(x<4){
					
					if(x==0){
						var txt="Le champs 'pseudo' est vide!";
					}else{
						var txt="Le pseudo donné est trop court!";
					}
					
					$("#error").empty().append(txt).addClass("error");
					return false;

				}else{
					return true;
				}
			});
			
		});
	</script>
</head>
<body>
	<form action="" method="post">
		<label for="name">Pseudo: </label><input type="text" id="name" name="name"/>
		<div id="error"></div> 
		<input type="submit" id="envoyer" />
	</form>
</body>
</html>

Modifié par davidito (16 Oct 2010 - 19:45)
Salut,

Sinon, tu peux aussi jeter un oeil au plugin validation pour jquery, qui est pas mal foutu, et qui intègre par défaut pas mal de routines qui te simplifieront sans doutes la vie ...
Modifié par MAD's (16 Oct 2010 - 21:26)
Merci pour vos réponses.
kenor a écrit :

1 : si il clique directement sur le bouton, sans rien toucher, ton formulaire est validé sans soucis ?
2 : si la personne fait &quot;entrer&quot;, l'action d'envoyer n'est pas vérifié.

en effet j'avais oublié de gérer lorsque l'internaute appuie sur entrer. J'ai modifié ma fonction avec submit au lieu de click, ca fonctionne très bien.
Pour le 1, j'ai revu mon formulaire et j'ai fait les vérifications à l'envoi du formulaire.

Je me suis inspiré aussi du code de davidito, pour refaire cela. J'ai en fait supprimer ma variable "valid" temporaire et j'ai fait mes vérifications comme dans le code de davidito en retournant true ou false lorsque c'était valide ou non.
Ensuite à l'envoi du formulaire j'ai vérifié que toutes les fonctions étaient validées, dans ce cas je retourne true, sinon je retourne false.

Voici le code : 

// je vérifie pendant la frappe et lorsque l'internaute sort du champ nom
nom.blur(checknom);
nom.keyup(checknom);

// à l'envoi du formulaire je vérifie que le champ nom retourne true, ensuite il suffit de rajouter pour tous les champs avec des ET Logique

$("#fmon-form").submit(function(){
                if(checknom()  )
                    return true 
                else
                    return false;
            });
// ma fonction qui vérifie le champ nom
function checknom(){
			if($("#nom").val() == ""){
						$("#champ-nom").next(".error").slideDown(); 
						$("#champ-nom").addClass("border2");
						return false;
					}
					else {  
						$("#champ-nom").next(".error").slideUp().text("Le champ Nom  est obligatoire "); 
						$("#champ-nom").removeClass("border2");
						return true;
					
					}
		}

J'ai vérifié, chez moi ca fonctionne, donc normalement c'est bon.

MAD's : Merci, en effet j'avais déjà vu ce plugin qui est très bien et qui propose beaucoup de possibilité, mais le but est de coder pour apprendre le js et jquery.
Sujet clos
Aller à