Vérification champs formulaire en js

Bonjour à tous,

J'aimerais faire apparaître une fenêtre "vous n'avez pas rempli tel ou tel champs dans le formulaire" afin d'effectuer une vérification et empêcher la validation du formulaire si un champ n'a pas été rempli mais j'ai un niveau assez faible en js alors j'aurais besoin d'un peu d'aide.
Merci.

Le formulaire :

<form action="form.php" method="post" name="formulaire">
				<ul>
					<li>
						<h2>Contactez moi !</h2>
					</li>
					<li>
						<label for="Nom">Nom </label><input id="name" name="nom" type="text">
					</li>
					<li>
						<label for="Prénom">Prénom </label><input id="prenom" name="prenom" type="text">
					</li>
					<li>
						<label for="Email">E-mail </label><input id="mail" name="mail" type="text">
					</li>
					<li>
						<label for="Message">Message </label><textarea id="text" name="message"></textarea> 
					</li>
					<li>
						<button  value="enregistrer" type="submit" name="envoyer" ">Envoyer</button>
					</li>
				</ul>
			</form>

Le js :

function valider()

	{

    if (document.getElementById('prenom') == ""){
	alert ("Veuillez entrer votre prénom!");
	return false;
    }

    if (document.getElementById('nom') == ""){
     alert ("Veuillez entrer votre nom!");
     return false;
    }

    if (document.getElementById('mail') == ""){
    alert ("Veuillez entrer votre e-mail!");
      return false;
    }

    if (document.getElementById('text') == ""){
    alert ("Veuillez composer votre message!");
       return false;
    }

}

Bonjour,

Alors déjà, avant même le recours au javascript, mettez le mot "required" dans votre html, comme ceci :

<input id="mail" name="mail" type="text" required>

Ou encore comme ceci :

<input id="mail" name="mail" type="text" required="required">

La fonction a l'air correcte, mais il ne se passe rien car il faut appeler cette même fonction lorsque l'on détecte un clic sur le bouton :

start = document.getElementsByName('envoyer')[0];
start.addEventListener('click', valider, false);

Modifié par Olivier C (06 Jan 2019 - 09:20)

Merci bien, j'ai mis votre bout de code après ma fonction valider mais il y a une erreur "TypeError: start.addEventListener is not a function"

var start = document.getElementsByName('envoyer');
start.addEventListener('click', valider, false);

Bonjour,

start est un tableau (a priori ne contenant qu'un seul élément ici).

La deuxième ligne devrait être :

start[0].addEventListener('click', valider, false);

Amicalement,

Bonjour,

Oui en effet j'avais mis des value à la base mais je les avais supprimé, merci.
Ca ne fonctionne pas totalement mais c'est déjà mieux, je vais essayer d'avancer dessus prochainement quand j'aurais le temps et si je suis bloquée je reviendrais vers vous, merci pour votre aide

Au fait, attention aux types de champs, cela permet notamment d'ajouter un contrôle supplémentaire sur certaines entrées. Par exemple : type="email" en lieu et place de type="text".

Bonjour,

Olivier C a écrit :
Si vous voulez en discuter à l'occasion...

S'il s'agit de vérification "syntaxique", pourquoi pas en JS en effet (en gros, on étend les éventuelles vérifications basiques faites par html5).

S'il s'agit de "sécuriser" le contenu (pour empêcher un malfaisant d'injecter du code malicieux par exemple), une vérification côté serveur me semble indispensable.

Personnellement, pour des questions de simplicité de l'architecture, je préfère faire la totalité des vérifications côté serveur, puisque de toute façon, il faut toujours en faire un peu pour la partie "sécurité", et donc mettre en place tous les mécanismes qui vont avec dont le ré-affichage de la page html contenant le formulaire si des données sont incorrectes. Mettre en place une vérification en JS côté client viendra en plus, et ne pourra qu'alourdir le fonctionnement de l'ensemble.

EDIT: (correction d'un coquille): ça peut avoir son intérêt de faire des vérifications côté client, surtout si on le fait dans l'esprit d'étendre les vérifications faites par html5 en utilisant en particulier l'attribut "pattern" (ce que tu ne sembles pas faire dans ton exemple).

Amicalement,
Modifié par parsimonhi (11 Jan 2019 - 12:18)

Je suis d'accord pour la priorité côté serveur, c'est d'ailleur pour cela que j'ai commencé avec PHP. Mais comme je m'intéresse à NodeJS cela me permettrais - en plus d'une réactivité - d'avoir un même code en back comme en front.

Et puis les patterns html5 c'est bien (et c'est une belle avancée) mais les messages d'erreurs restent très généralistes.

Bonjour,

Olivier C a écrit :
Je suis d'accord pour la priorité côté serveur, c'est d'ailleur pour cela que j'ai commencé avec PHP. Mais comme je m'intéresse à NodeJS cela me permettrais - en plus d'une réactivité - d'avoir un même code en back comme en front.

Et puis les patterns html5 c'est bien (et c'est une belle avancée) mais les messages d'erreurs restent très généralistes.

On peut les changer avec la méthode element.setCustomValidity (element étant l'input qui vient d'être vérifié).

Tu rajoutes certes du javascript du coup, mais très réduit. Et l'intérêt est que ton code de validation sera déclenché et affichera le message par défaut même si javascript est désactivé.

Amicalement,

Merci je ne connaissais pas. Ça c'est intéressant...

parsimonhi a écrit :
On peut les changer avec la méthode element.setCustomValidity (element étant l'input qui vient d'être vérifié).

Et ! Je viens de m'appercevoir que l'on peut personnaliser - en partie - le message via un élément title. Incroyable, ça fait un moment que je ne m'étais pas mis à jour de ce côté là...

Bonjour,

@Olivier C

Si tu cherches d'autres voies, t'en as une qui est pas mal aussi, consistant à utiliser :valid et :invalid dans tes sélecteurs css.

Du coup, vu ta maitrise du css, ça ne devrait pas être un problème pour toi de fabriquer des tooltips bien comme il faut en couplant ça avec des :before et :after.

Je n'ai pas vérifié la compatibilité : à voir, donc !

EDIT: il faudra sans doute combiner avec le label de l'input en utilisant un sélecteur du genre input:invalid + label:before

Amicalement,

PS: je sens que tu es bon pour une 2e nuit blanche de range, là !
Modifié par parsimonhi (18 Jan 2019 - 14:58)

Ah oui, merci pour toutes ces précisions. :valid et :invalid et :focus je les avais testé déjà il vu a un p'tit moment, mais je ne les avais pas vraiment exploité, je ne sais plus pourquoi, peut-être que ces solutions n'étaient pas encore assez mûres, je ne sais plus trop.

Les nuits blanches... ça c'était quand j'étais célibataire et que je faisais du code H24. Maintenant que j'ai une petite famille et une maison à retaper... Je ne fait plus que de la veille techno en ce moment, ainsi va la vie (mais je ne regrette rien).

Quand je prendrais le temps je me pencherais sur la création d'un petit framework perso, sans doute en Node.js, d'où mon intérêt pour le JS. Je voulais déjà m'y pencher dessus il y a deux ans mais je n'ai pas trouvé le temps. Et puis mon passage à Linux a été un peu houleux : beaucoup de plantages et des distributions bof bof, mais j'ai trouvé ma vie avec Deepin. En plus il faut/fallait avoir un serveur dédié pour exécuter Node.js alors bon... rien ne pressait.