Validation d'un formulaire

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
ab1011
Messages : 2
Enregistré le : 01 juil. 2020, 16:35

Validation d'un formulaire

Message par ab1011 » 01 juil. 2020, 16:45

index.html

Code : Tout sélectionner


<!DOCTYPE html>

<html lang="fr">

<head>
	<title>Création d'un jeu</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script type="text/javascript" src="js/script.js"></script>
</head>

<body>
	<div id="wrapper">
		<form method="post" action="" name="submitForm" onsubmit="return validerLeFormulaire()">
			<table>
				<thead>
					<tr>
						<th>Création d'un jeu</th>
					</tr>
				</thead>

				<tbody>
					<tr>
						<td><input type="text" name="number" id="number" placeholder="nombre"></td>
					</tr>
				</tbody>

				<tfoot>
					<tr>
						<th><input type="submit" value="Valider" id="submit"></th>
					</tr>
				</tfoot>
			</table>
		</form>
	</div>
</body>

</html>

js/script.js

Code : Tout sélectionner


function validerLeFormulaire() {

var number = document.forms["submitForm"]["number"].value;

if(isNaN(number)) {

	alert("Vous devez indiquer un nombre !");
}
if else(number < randon) {

	alert("Le nombre indiqué est trop petit");
}
if else(number > random) {

	alert("Le nombre indiqué est trop grand");
}
if else(number == random) {

	alert("Vous avez gagné !");
}

var min = 1; 
var max = 100;  
var random = Math.floor(Math.random() * (max - min)) + min; 
alert(random);

}

Bonjour, rien ne fonctionne, besoin d'aide, merci d'avance.

Avatar du membre
webmaster
Administrateur du site
Messages : 249
Enregistré le : 28 févr. 2017, 15:19

Re: Validation d'un formulaire

Message par webmaster » 06 juil. 2020, 16:09

Bonjour,

la console indique une erreur JS
Et en effet, la syntaxe "if else" n'existe pas
C'est "else if" qu'il faut utiliser
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

jean3xw
Messages : 3
Enregistré le : 17 juil. 2020, 06:06

Re: Validation d'un formulaire

Message par jean3xw » 17 juil. 2020, 06:34

Salut,
oui en plus d'avoir plein de fautes(utiliser la console et vous pouvez les traquer une à une) comme "randon" au lieu de "random" il me semble avoir un autre problème(et mieux vaut éviter de donner des noms de variable qui sont aussi des noms de méthodes/fonctions, cela peut poser des conflits car mots interdits et ça rendra le script beaucoup moins clair).
Vous utilisez la méthode POST qui envoie vers une autre page et pourtant le traitement se fait dans la même page.
Même chose un formulaire étant fait pour être envoyé la page sera rechargé lors du submit.
Hors si vous mettez l'action lors du submit(onSubmit) c'est l'envoi vers la page indiqué par action qui se fait puis l'exécution du code sauf qu'il n'y a plus le code.
Pour contrer cela vous pouvez désactiver le submit de plusieurs façons en JavaScript ou simplement ne pas utiliser un formulaire si le but que vous avez n'est pas d'envoyer des données vers la même page (ou la même mais en rechargeant cette page avec GET).

Une meilleure façon que d'utiliser les attributs pour détecter un événement JavaScript est d'utiliser la méthode addEventListener

Code : Tout sélectionner

document.getElementById('submit').addEventListener('click',
 function(e){alert('clic sur '+e.target);},
 true
 );
Remarquez le 3ème paramètre de addEventListener qui est facultatif(false par défaut) et permet d'arrêter la propagation de l'élément, çad empêcher de déclencher l'action normale (stoppe la propagation de la chaîne de réactions) d'un submit sur formulaire avec la valeur true. Par défaut en laissant la valeur vide il sera à false et l'action se déroulera normalement.
Une autre façon de faire est de ne pas utiliser un input type submit mais un bouton ou un lien qui ne déclenche pas l'envoi du formulaire vers une autre page(ou même de ne pas utiliser de formulaire). Il reste possible de déclencher manuellement l'envoi du formulaire en utilisant la méthode FORM.submit().

Le problème principal reste que vous avez des fautes donc rien ne peut fonctionner.

Répondre