Bonjour à tous,

Je m'occupe actuellement d'optimiser un formulaire que j'avais crée, et je bloque un peu sur la façon de faire pour valider tous mes champs avant de pouvoir envoyer le formulaire.

Y'a bien la façon du IF dans le IF dans le IF mais qui n'est pas du tout propre à mon goût.

Aujourd'hui j'ai, mes champs :

<div class="input-group">
	<span class="input-group-addon" id="label_demandeur_nom_de_famille">Nom de famille</span>
	<input type="text" class="form-control" name="ask_lastname" placeholder="Nom de famille" value="<?php echo $compte['ask_lastname']; ?>">
</div>

Et mes vérifications en jQuery, qui vont afficher le champs en rouge ou en vert selon la présence de texte :

Lorsque je clique en dehors de la zone de texte :

	$(ask_lastname).focusout(function() {
		if(ask_lastname.val() == '' || ask_lastname.val() == undefined){
			$('#label_demandeur_nom_de_famille').css('border-left', '10px solid red').css('background', '#fbdede');
			formulaire_erreur_page1.push(1);
		}else{
			$('#label_demandeur_nom_de_famille').css('border-left', '10px solid green').css('background', '#defbde');
			formulaire_erreur_page1 = [];
		}		
	});

Lorsque la page est chargé (pour un formulaire de modification les champs sont pré-remplis pour certains) :

	if(ask_lastname == '') {
		$('#label_demandeur_nom_de_famille').css('border-left', '10px solid red').css('background', '#fbdede');
		formulaire_erreur_page1.push(1);
	}else{
		$('#label_demandeur_nom_de_famille').css('border-left', '10px solid green').css('background', '#defbde');
		formulaire_erreur_page1 = [];
	}

Du coup, j'avais mis un array[] qui va être pusher à chaque fois qu'il trouve une erreur et ensuite vérifier que le tableau est vide mais ça n'as pas l'air de fonctionner.

Comment faites-vous pour vérifier la présence de texte dans chacun des champs, de manière le plus optimisé possible ?

Merci d'avance,

Bonjour,

il te suffit de mettre un event.preventDefault() dans ton submit.
Puis de checker si les donnees sont correct ou pas. Si elles le sont alors tu soumet le formulaire.

Ce que tu peux faire c'est enlever le input type=submit de ton formulaire (s'il y en a un). En faisant ca, l'internaute ne pourra pas valider le formulaire en appuyant sur la touche entree (je crois).

A la place du input type=submit tu met par exemple un lien comme celui ci:

<a id="poupou">Envoyer</a>

Puis tu le design comme tu veux en CSS.

Ensuite en javascript tu dois avoir un truc dans ce genre:

$("#poupou").click(function(event){
	event.preventDefault();

	// Verification des donnees

	if (error === false) {
		alert("UNE ERREUR");
	} else {
		$("#mon_formulaire").submit();
	}

});

En gros, lorsque l'internaute clique sur #poupou on s'arrete grace a : event.preventDefault();
Puis toi, tu verifies les donnees.

S'il y a une erreur tu fais quelque (ex: afficher un message d'erreur, envoyer l'internaute sur le site du FBI, etc.. tu choisis). 
Si par contre il n'y a pas d'erreur, tu soumet le formulaire grace a : $("#mon_formulaire").submit();

-
Edité par Scion 17 mai 2018 à 10:12:37

Bonjour,

Oui comme dit Scion sinon tu peux juste faire un test qui vérifie si tu reçois quelque chose de différent de vide

Je n'utilise pas de "formulaire" à proprement parler dans mon code, je met juste des <inputs> [text, select, dates..] dans mon code puis je récupère avec des sélecteurs en jQuery.

Ma méthode n'est pas propre ?

En faite, après re-lecture, ce que je demandais, c'est comment optimiser cette partie du code :

if (error === false) {
   alert("UNE ERREUR");
} else {
    $("#mon_formulaire").submit();
}

J'ai pas envie de mettre 100 if dans mon code car j'ai beaucoup de champs, y'a pas moyens d'optimiser ça ?

-
Edité par Martin40 17 mai 2018 à 11:08:48

Salut,

Le plus simple ne serait-ce pas de vérifier le contenu du champ directement avec les attributs HTML ?

Comme ceci, en mettant required dans ta balise input :

https://jsfiddle.net/wmn5am71/

Tiens-nous au courant !

Qu'entends-tu par "contournable" ? Personne ne peut outrepasser cette condition, en plus tu as un message généré automatiquement !

 Adrien9988 a écrit:

Qu'entends-tu par "contournable" ? Personne ne peut outrepasser cette condition, en plus tu as un message généré automatiquement !

En retirant le "require" dans "Inspecter l'élément" du navigateur, tu l'outrepasse facilement.

Offkors a écrit:

Dans ce cas, j'ai une question : Utilises-tu seulement des input pour ton formulaire ?

C'est pour cela qu'il faut faire une verification ensuite cote serveur en Php.

En effet, le Javascript n'est la que pour le visuel j'ai envie de dire: il ne securise rien du tout !
C'est uniquement une aide a l'internaute lambda qui remplis un formulaire. Un internaute qui voudras t'embeter enverra des donnees a ton serveur sans passe par un formulaire du coup tout ton JS (verication des champs, etc..) ca ne l'arretera pas.

Tu dois verifier les donnees recu en priorite. Le JS n'est que secondaire.

Bonjour Martin40

Je suis d'accord avec Scion

Cite :

J'ai pas envie de mettre 100 if dans mon code car j'ai beaucoup de champs, y'a pas moyens d'optimiser ça ?

Tu peux faire une fonction qui gère tes trois types de champ (txt,selet)

et de faire un sélecteur sur requiere du genre

$("#monform [attr=requiere]").each(function(i,e){
    mafonction(e);
/* traitement pour gérer error*/
});
function mafonction(e){
  (si e est text et pas vide) 
   return true;
  (si e est select et avec option sélectionné) 
   return true;
  sinon
 return false
}

@Scion,

J'ai un script d'update standard que j'utilise pour tous mes modifications sur mon site, il faudra que je l'adapte pour vérifier les données en PHP, tu as raison.

@AliasDmc,

Exactement ce qu'il me fallait, je vais juste l'adapter à ma sauce.

Je vous ferais un retour du résultat