11546 sujets

JavaScript, DOM et API Web HTML5

JQuery : Mettre du text via selector

Bonjour,

Je débute en JQuery, je suis en train de faire une vérification de formulaire et je but depuis un moment sur un problème avec mon "next".
Pour être plus clair voici le code et les explications de ce que j'essai de faire :

Lors du clic sur le bouton (id : envoyer) le javascript doit si le nom n'est pas renseigné aller mettre du texte dans le div qui le suit qui contient la classe erreur.

ça n'a pas l'air compliqué pourtant...

Partie de mon Js et Html

<script type="text/javascript">
	$(function(){
		
		$("#envoyer").click(function(){
			valid=true;
			if ($("#nom").val() ==""){
				$("#nom").next(".erreur").text("test");
				valid=false;				
			}
			return valid;
		});
	});	
</script>
....
<form name="frmcontact" action="#" method="post">
   <div class="sepform"><span>Informations personnelles</span></div>
	<p>
	<label for="nom">Nom <span class="obl">*</span></label><input type="text" name="nom" id="nom" required />				
	</p>
	<div class="erreur"></div>
	<p>
	<label for="prenom">Prénom</label><input type="text" name="prenom" id="prenom" />
	</p>
	<div class="erreur"></div>


Merci de votre aide
Coucou,

° Déjà, as-tu bien inclue la librairire Jquery dans ta page ? (Avec la balise
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> )

° Ensuite, ton script Jquery doit ressembler à ça

$(document).ready(function() // Lors du chargement de la page
{
....... // Ton code
});


° Ensuite, essayes de structurer comme ça : 

$(document).ready(function() // Lors du chargement de la page
{
	function maFonction() // Tu déclares ta fonction
    {
			var valid=true; // Oublies pas le "var" pour déclarer c'est plus propre

			if (!$("#nom").val())  // Le ' ! ' signifie n'existe pas (ici champ vide)
                       {

				$(".erreur").text("test");  // Pourquoi utiliser un next ?

				 valid=false;				
			}
			return valid;
	}

	$("#envoyer").click(function(){  // Sur le click de ton bouton
	   var resultat = maFonction();  // Tu exécutes ta fonction
	   alert (resultat);
	});
	
});


Ça fonctionne chez moi,
En espérant t'avoir aidé Smiley smile
Modifié par Seyu (08 Feb 2012 - 12:35)
L'include pas de problème j'ai mis jQuery en "local"

Pourquoi le ready ?
Dans les tutos vidéos d'un très bon site (Grafikart), j'ai vu qu'il utilisé la méthode d'appel que j'ai employé. Quel différence ?
C'est de se tuto JQuery sur les contrôles de formulaire que je m'inspire.

Ok pour la restructuration du code, et pour le var.

a écrit :

Le ' ! ' signifie n'existe pas (ici champ vide)


Justement le champ existe, je contrôle si la saisie est faite dedans. si pas de saisie > avertissement.

J'utilise le next parce que je veux accéder au premier "tag" qui contient la classe erreur après moi (ici #nom) pour le mettre en rouge avec un message dedans.

J'ai un div avec la classe erreur après chaque input qui apparaît en cas d'erreur.
J'ai volontairement épuré le code à publier sur le forum pour faire simple, car si ça marche pour l'un ça marchera pour les autres.
Sujet clos
Aller à