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">

Bonjour,

Merci, alors oui j'ai vu que l'on pouvait mettre required il y a pas très longtemps mais comme je dois mettre du javascript sur mon site et que j'avais commencé ça j'avais envie de continuer ce code

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,
Merci, j'ai essayé avec start[0] et il n'y a plus d'erreurs par contre il ne se passe strictement rien du tout alors j'ai du oublier quelque chose d'important probablement.. ou alors il y a un problème dans la fonction valider mais je ne vois pas quoi

	var start = document.getElementsByName('envoyer');

	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;
    }
}
	
	start[0].addEventListener('click', valider, false);

parsimonhi a écrit :
start est un tableau

Autant pour moi ! J'ai effectivement oublié les crochets avec le zéro qui permet de récupérer la première valeur du tableau.

Bonjour,

Il faut rajouter des ".value" après tes "document.getElementById('...')".

if (document.getElementById('prenom').value == "")

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".

Isylda a écrit :
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

Ce topic m'a donner envie de progresser sur ce thème. A partir de ce Pen, j'ai commencé à convertir en JS mes regex côté serveur, écrits en PHP, et surtout à améliorer mon système pour le rendre moins circonstancié et plus réutilisable (je pense utiliser des paramètre data-uri sur les champs).

Si vous voulez en discuter à l'occasion...
Modifié par Olivier C (11 Jan 2019 - 10:52)

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 a écrit :

Et ! Je viens de m'apercevoir 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à...

En effet.

Mais le contenu de "title" sert aussi à autre chose, en particulier quand on fait un hover sur l'input (affichage par les navigateurs du title dans un tooltip), ainsi que pour améliorer l'accessibilité. Il faut donc rédiger le message de manière à ce qu'il soit passe-partout.

Par exemple, pour un input pouvant se nommer "Taille en cm" et ne devant contenir que des chiffres, on écrira quelque chose du genre "Taille en cm : ne doit contenir que des chiffres" plutôt que "Erreur : veuillez ne saisir que des chiffres".

EDIT: il semble aussi que certains navigateurs ne tiennent pas compte du contenu de "title", en particulier Safari. Mais ce n'est pas très grave dans la mesure où ils affichent quand même un message d'erreur générique ("Utilisez le format requis" en ce qui concerne le navigateur que j'ai testé).

Amicalement,
Modifié par parsimonhi (18 Jan 2019 - 14:36)

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.