Vérification de formulaire javascript

Signaler
-
 sweap -
Bonjour je débute en javascripte et ne trouve pas ou est le problème dans mon code :/
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./style.css">
<script type='text/javascript' src="./script.js"> </script>
</head>
<body>
<br><br><br><br>
<h1 title="ceci est un titre">Inscription à la bêta du projet Jump</h1>
<form action='validation.html' onSubmit="return valider()" method="get" name='formulaire'>
<br><br>
<fieldset>
<legend>Information du profil:</legend>
Nom:<br>
<input type="text" name="Nom" id="Nom">
<br>
Prénom:<br>
<input type="text" name="Prenom" id="Prenom">
<br>
Numéro de téléphonne:<br>
<input type="tel" name="Numero" id="Numero">
<br>
Email:<br>
<input type="text" name="Mail" id="Mail">
<br>
Les Motivations:<br>
<input type="textarea" name="Motiv" id="Motiv">
<br>
Le CV:<br>
<input type="file" name="CV" id="CV">
<br>
Mot de passe:<br>
<input type="password" name="Mdp" id="Mdp">
<br>
Condition d'utilisation : <input type="checkbox"
name="condition">
<br><br>
<input type="submit" value="Soumettre">
</fieldset>
</form>
</body>
</html>

Javascript:
<script type="text/javascript">
function valider(){
}
if (document.formulaire.Nom.value!= ""){
alert('Veuillez rentrer un nom <br>');
return false;
}
if (document.formulaire.Nom.value= ""){
return true;
}
if (document.formulaire.Prenom.value!= ""){
alert('Veuillez rentrer un prenom <br>');
return false;
}
if (document.formulaire.Prenom.value= ""){
return true;

if (document.formulaire.Numero.value.length!=10){
alert('Veuillez rentrer un Numéro correct <br>');
return false;
}
if (document.formulaire.Numero.valuelenght=10){
return true;
}
if (document.formulaire.Mail.value!= ""){
alert('Veuillez rentrer un Email <br>');
return false;
}
if (document.formulaire.Mail.value= ""){
return true;
}
if (document.formulaire.Motiv.value!= ""){
alert('Veuillez rentrer vos motivations <br>');
return false;
}
if (document.formulaire.Motiv.value= ""){
return true;
}
if (document.formulaire.Mdp.value!= ""){
alert('Veuillez rentrer un Mot de passe <br>');
return false;
}
if (document.formulaire.Mdp.value= ""){
return true;}
}

Css:
#diverror{
background-color:rgb(255,127,127);
color:red;
font-weight:bold;
font-style:italic;
border:red 3px dashed;
display:none
}
h1 {
color:white;
text-align:center;
font-family:Times New Roman;
font-size: 40px;
}
body {
color:white;
background-color:white;
background-image:url(images/galaxy.jpg);
background-repeat:no-repeat;
background-size: cover;
}

htlm 2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./style.css">
<script type='text/javascript' src="./script.js"> </script>
</head>
<body>
<h1 title="ceci est un titre">Formulaire basique</h1>
<h2>Le formulaire a bien été validé.</h2>
</body>
</html>


EDIT : Ajout des balises de code

Voila Merci à ceux qui prendrons le temps de m'aider :)

3 réponses

Messages postés
32446
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 mai 2021
3 484
Bonjour,

Déjà, merci d'utiliser les balises de code pour poster du code sur le forum..
Explications ( à lire ENTIEREMENT ! ) disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

Ensuite, prends l'habitude de charger ton javascript à la fin de ta page html ( avant le </body ) et non dans les balises <head> ( ça c'était la façon de faire d'il y a 15 ans :-) )

Et enfin,
Sans regarder plus loin, je vois déjà que tu fermes ta fonction à la seconde ligne.. et donc que tout le reste ne se trouve pas dedans..
function valider(){
} // là tu viens de fermer la fonction ...

Bonjour, merci de ta réponse cependant une fois le code modifié, le problème persiste :/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<br><br><br><br>
<h1 title="ceci est un titre">Inscription à la bêta du projet Jump</h1>
<form action='validation.html' onSubmit="return valider()" method="get" name='formulaire'>
<br><br>
<fieldset>
<legend>Information du profil:</legend>
Nom:<br>
<input type="text" name="Nom" id="Nom">
<br>
Prénom:<br>
<input type="text" name="Prenom" id="Prenom">
<br>
Numéro de téléphonne:<br>
<input type="tel" name="Numero" id="Numero">
<br>
Email:<br>
<input type="text" name="Mail" id="Mail">
<br>
Les Motivations:<br>
<input type="textarea" name="Motiv" id="Motiv">
<br>
Le CV:<br>
<input type="file" name="CV" id="CV">
<br>
Mot de passe:<br>
<input type="password" name="Mdp" id="Mdp">
<br>
Condition d'utilisation : <input type="checkbox"
name="condition">
<br><br>
<input type="submit" value="Soumettre">
</fieldset>
</form>
<script type='text/javascript' src="./script.js"> </script>
</body>
</html>


<script type="text/javascript">
function valider(){
if (document.formulaire.Nom.value!= ""){
 alert('Veuillez rentrer un nom <br>');
 return false;
}
if (document.formulaire.Nom.value= ""){
 return true;
}
if (document.formulaire.Prenom.value!= ""){
 alert('Veuillez rentrer un prenom <br>');
 return false;
}
if (document.formulaire.Prenom.value= ""){
 return true;

if (document.formulaire.Numero.value.length!=10){
 alert('Veuillez rentrer un Numéro correct <br>');
 return false;
}
if (document.formulaire.Numero.valuelenght=10){
 return true;
}
if (document.formulaire.Mail.value!= ""){
 alert('Veuillez rentrer un Email <br>');
 return false;
}
if (document.formulaire.Mail.value= ""){
 return true;
}
if (document.formulaire.Motiv.value!= ""){
 alert('Veuillez rentrer vos motivations <br>');
 return false;
}
if (document.formulaire.Motiv.value= ""){
 return true;
}
if (document.formulaire.Mdp.value!= ""){
 alert('Veuillez rentrer un Mot de passe <br>');
 return false;
}
if (document.formulaire.Mdp.value= ""){
 return true;}
}
Messages postés
32446
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 mai 2021
3 484
Alors, maintenant, il va falloir bosser sur tes conditions.

Déjà , le != veut dire NOT EQUAL ..
Donc, ton premier IF .. fais l'inverse de ce que tu veux visiblement.

Ensuite, pour comparer deux valeurs (voir si elles sont identiques ) il faut utiliser deux égals ==
Donc tous les IF où tu n'as mis qu'un seul = ne sont pas bons.

Après, il te reste à corriger la position de tes accolades.
Tu sembles avoir oublié l'accolade de fin de ta fonction ... ou alors tu as oublié de fermer un if vers le milieu du code...

Et enfin .. penses à regarder dans la console de ton navigateur les éventuels messages d'erreurs...
Premièrement je tiens à te remercier de m'aider car c'est frustrant pour moi actuellement de ne pas y arriver.
J'ai effectué toutes les modifications mais cependant je peux toujours soumettre le formulaire alors que tous les champs sont vides...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<br><br><br><br>
<h1 title="ceci est un titre">Inscription à la bêta du projet Jump</h1>
<form action='validation.html' onSubmit="return valider()" method="get" name='formulaire'>
<br><br>
<fieldset>
<legend>Information du profil:</legend>
Nom:<br>
<input type="text" name="Nom" id="Nom">
<br>
Prénom:<br>
<input type="text" name="Prenom" id="Prenom">
<br>
Numéro de téléphonne:<br>
<input type="tel" name="Numero" id="Numero">
<br>
Email:<br>
<input type="text" name="Mail" id="Mail">
<br>
Les Motivations:<br>
<input type="textarea" name="Motiv" id="Motiv">
<br>
Le CV:<br>
<input type="file" name="CV" id="CV">
<br>
Mot de passe:<br>
<input type="password" name="Mdp" id="Mdp">
<br>
Condition d'utilisation : <input type="checkbox"
name="condition">
<br><br>
<input type="submit" value="Soumettre">
</fieldset>
</form>
<script type='text/javascript' src="./script.js"> </script>
</body>
</html>

<script type="text/javascript">
function valider(){
if (document.formulaire.Nom.value==""){
	alert('Veuillez rentrer un nom <br>');
	return false;
}
if (document.formulaire.Nom.value!==""){
	return true;
}
if (document.formulaire.Prenom.value==""){
	alert('Veuillez rentrer un prenom <br>');
	return false;
}
if (document.formulaire.Prenom.value!==""){
	return true;
}
if (document.formulaire.Numero.value.length==10){
	alert('Veuillez rentrer un Numéro correct <br>');
	return false;
}
if (document.formulaire.Numero.valuelenght!==10){
	return true;
}
if (document.formulaire.Mail.value==""){
	alert('Veuillez rentrer un Email <br>');
	return false;
}
if (document.formulaire.Mail.value!==""){
	return true;
}
if (document.formulaire.Motiv.value==""){
	alert('Veuillez rentrer vos motivations <br>');
	return false;
}
if (document.formulaire.Motiv.value!==""){
	return true;
}
if (document.formulaire.Mdp.value==""){
	alert('Veuillez rentrer un Mot de passe <br>');
	return false;
}
if (document.formulaire.Mdp.value!==""){
	return true;
}
}