11522 sujets

JavaScript, DOM et API Web HTML5

Contrôle de formulaire sur serveur (PHP) ET client (JavaScript).

Bonsoir à tous et merci d'avance pour vos réponses à la question suivante:

Préconnisez-vous le contrôle de champ d'entrée de formulaire à la fois sur serveur (PHP) et sur client (JavaScript) ?
Si oui, comment modifier le code suivant dans ce sens (contrôle PHP en ordre) en n'appelant le contrôle JavaScript (checkform()) qu'en cas d'activation de ce language chez le client ?
(Utiliser également l'élément d'array $message["Password"] plutôt qu'une window.alert() en JavaScript.)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<?PHP
	if (!isset($_POST['Password'])) $_POST['Password'] = "";
	if (preg_match('/^\w{4}/',$_POST['Password'])) $message["Password"] = ""; else $message["Password"] = "Le mot de passe doit contenir 4 caractères parmi A-Z, a-z, 0-9 ou _ !";
?>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>Sample02</title>
		<script type="text/JavaScript"> <!--
			function checkform(f) {
				var regExpr='/^\w{4}$/';
				if (regExpr.test($_POST['Password'])) {
					window.alert("Password ok.");
					return true;
					}
				else {
					window.alert("Le mot de passe doit contenir 4 caractères parmi A-Z, a-z, 0-9 ou _ !");
					return false;
					}
				}	
			// -->
		</script>
	</head>

	<body>
		<form action="Sample02.php" method="post" enctype="multipart/form-data" onSubmit="return checkform(this);">
			<p> Mot de passe de 4 caractères (0-9 a-z A-Z _):
				<input type="password" name="Password" id="Password" size="2" maxlength="4" value="<?php print $_POST['Password']; ?>"/>
				<span id="password_alert"><?php print $message["Password"]; ?></span>
			</p>
			<p><input type="submit" value="Valider" /></p>
		</form>
	</body>
</html>

Modifié par JoVD (05 Feb 2009 - 20:32)
Salut JoVD,

Personnellement oui je préconise le contrôl en php et en javascript. Ca te permet de faire un pré-control (javascript) avant que les données soient envoyée au server. Dans le cas de gros formulaires avec fichiers joints et tout sa peut être pénible pour le visiteur de voir s'afficher une erreur au bout de 10 minutes parce qu'il a oublié de cocher une checkbox Smiley smile .

Et pour répondre à ta question, l'idée est de rajouter à ton bouton <input type="submit" value="Valider" /> un action onclick qui va exécuter les fonctions javascript de control et faire le submit. (dans le cas ou le javascript est pas activé, c'est le submit original du bouton qui prend le relais)

Voilà, j'espère que sa t'aidera
Modifié par Mikerob (29 Jan 2009 - 11:59)
Modérateur
Salut, Smiley smile

L'impératif est la vérification côté serveur mais on peut améliorer l'ergonomie en ajoutant les contrôles côté client, effectivement.

Après, pour mettre en place la vérification côté client, il vaut mieux lancer la fonction de vérification sur l'événement submit du formulaire et non sur l'événement click du bouton de soumission.
A ce sujet et pour en savoir plus, je te conseille de consulter l'article de Quentin : Formulaires: onsubmit contre onclick

Enfin, histoire d'optimiser/factoriser le code, il peut être bon d'établir les fonctions de vérification côté serveur et d'y faire appel via Ajax lorsque JS est disponible. Ainsi, la vérification ne s'effectue qu'à un seul endroit; il est inutile de dupliquer ces fonctions côté serveur et côté client.

PS: Peux-tu éditer ton premier message afin d'encadrer le code à l'aide des balises [code ]...[ /code] (sans espaces) comme prévu dans les règles du forum ? Merci d'avance. Smiley cligne
Modifié par koala64 (29 Jan 2009 - 12:27)
Merci pour vos réponses, koala64 et Mikerob.
Je vous tiendrai au courant dès que j'aurai vu cela à fond.
Faute de trouver 'le bouton CODE approprié' (point 13 du règlement), koala64, je viens d'encadrer mon code source manuellement de ces balises.
Bien à vous.
Bonsoir JoVD,

JoVD a écrit :
Faute de trouver 'le bouton CODE approprié' (point 13 du règlement), koala64, je viens d'encadrer mon code source manuellement de ces balises.
Bien à vous.

Tu ne vois pas, n'as pas accès à ce bouton lorsque tu rédiges ou édites un message ?

upload/12813-1-code.gif

Cdt,
Sylvain
Bonjour à tous (dont Koala64 et Mikerob),

D'accord avec l'article de Quentin (mon code source se basait déjà sur l'évènement onsubmit plutôt que onclick), je m'extrais momentanément de mes lectures de tutoriels JavaScript et autres pour demander à quiconque qui connaîtrait un article traitant de formulaires contrôlés en PHP ET JS de bien vouloir m'en communiquer la référence.

Même question pour les formulaires faisant appel au contrôle PHP de champs appelé par JS via AJAX, koala64 (quoique j'en craigne aussi un certain alourdissement des réponses).

Merci d'avance.
Bonjour, une petite recherche Google des familles :
http://www.google.fr/search?hl=fr&q=verification+de+formulaire+php+javascript+tutoriel
>> http://blog.aguillem.fr/36-tutoriel-javascript-php-ajax-verifier-les-donnees-d-un-formulaire (et d'autres)
Si tu as besoin d'aide, je bosse sur un tel système pour une application web open source qui traite des données médicales (donc assez stricte), je pourrais peut être t'aider. Notre système est cependant assez générique et peut s'adapter à tout type de données.
Merci pour ta proposition, Fabien.
Je poursuis d'abord un peu ma recherche personnelle et te reviens sans tarder.
Je viens d'un peu actualiser mon code source (exemple réduit à sa plus simple expression) d'où il ressort déjà que j'aurai beaucoup de mal à retirer la ligne 38 (<span id="password_alert"><?php print $message["Password"]; ?></span>) en cas de test JS. Mais je creuse d'abord tes références ... A+
Bonjour à tous,

Me revoici enfin, comme promis, avec le fruit de mes cogitations basées sur vos précieuses remarques. Vous en trouverez le code ci-dessous. Je le soumets volontier à votre critique. Merci encore à tous.

Quelques remarques de ma part:
- Réduit à sa plus simple expression (un seul champ: Password), ce cas d'école intègre en moins de 50 lignes les scripts CSS, PHP et Javascipt ainsi que les lignes XHTML. A vous de séparer ce que bon vous semble.
- Comme proposé par A. Guillemette, il utilise le document object modeling (DOM) pour remplacer le message d'erreur php par celui de JavaScript (plutôt que les fenêtres d'alerte JavaScript). (Il n'utilise pas AJAX dans ce cas-ci).
- Il utilise l'événement onsubmit plutôt que onclick.
- Le but initial étant de réduire au minimum les appels au serveur, le client (browser) effectuera (en JavaScript si actif) le même test d'erreur que le serveur (en PHP). (Désolé, koala24).
- Comme nécessaire, le test d'erreur sur serveur sera effectué dès avant le premier envoi de la page (désolé, Anthony G.) par le serveur, et en cas d'absence d'erreur js, un dernier test sera encore effectué sur serveur (avant éventuel traitement ...). 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<?PHP
	if (!isset($_POST['Password'])) $_POST['Password'] = "";
	if (preg_match('/^\w{4}/',$_POST['Password'])) $message["Password"] = "PHP: Mot de passe correct.";
	else $message["Password"] = "PHP: Le mot de passe doit contenir 4 caract&egrave;res parmi 0-9, a-z, A-Z ou _ !";
?>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>Sample02</title>
		<style type="text/css">
			span {color: red};
		</style>
		<script type="text/JavaScript"> <!--
			// alert("Before checkform() function (in js script).\n(PHP script executed).");
			function checkform(f) {
				var regExpr=/^\w{4}$/;
				// alert(f.elements["Password"].value);  		// ou alert(document.getElementById('Password').value);
				var password_alert = document.getElementById('password_alert');
				while(password_alert.firstChild != null) password_alert.removeChild(password_alert.firstChild); // (Suppression du message d'erreur existant.)
				if (regExpr.test(f.elements["Password"].value)) {
					// alert("JS: Mot de passe correct.");
					// var texte = document.createTextNode("JS: Mot de passe correct.");
					// password_alert.appendChild(texte);
					return true;
					}
				else {
					// alert("JS: Le mot de passe doit contenir 4 caract&egrave;res parmi 0-9, a-z, A-Z ou _ !");
					var texte = document.createTextNode("JS: Le mot de passe doit contenir 4 caract&egrave;res parmi 0-9, a-z, A-Z ou _ !");
					password_alert.appendChild(texte);
					return false;
					}
				}	
			// -->
		</script>
	</head>

	<body>
		<form action="Sample02.php" method="post" enctype="multipart/form-data" onsubmit="return checkform(this);">
			<p> Mot de passe de 4 caract&egrave;res (0-9 a-z A-Z _):
				<input id="Password" type="password" name="Password" size="2" maxlength="4" value="<?php print $_POST['Password']; ?>"/>
				<span id="password_alert"><?php print $message["Password"]; ?></span>
			</p>
			<p><input type="submit" value="Valider" /></p>
		</form>
	</body>
</html>


Sauf remarque de votre part, on peut clore cette question à mon humble avis.
Bien à vous, JoVD.
Sujet clos
Aller à