ContrĂŽle des formulaires avec JavaScript

ContrĂŽle d'un formulaire de contact avec l'Ă©vĂšnement submit

Voici un exemple oĂč le JavaScript bloque l'action du formulaire tant que les champs ne sont pas valides. Quelques points Ă  retenir :

  • Le tableau document.forms[0] identifie le premier formulaire de la page
  • L'action du formulaire est bloquĂ©e par la fonction preventDefault()
  • La captation de la soumission du formulaire est rĂ©alisĂ©e par la mĂ©thode addEventListener("submit", ...)
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <h1>Contact</h1>
    <form method="post" action="email.php">
        <label>E-mail :</label>
        <input type="text" id="email" name="email">
        <label> Votre message :</label>
        <textarea id="message" name="message"></textarea>
        <input type="submit">
    </form>
    <script>
        document.forms[0].addEventListener("submit", function(evenement) { 
            if (document.getElementById("email").value == "") {
                evenement.preventDefault();
                alert("Tapez un email valable pour avoir une réponse.");
                document.getElementById("email").focus();
            }
            else if (document.getElementById("message").value == "") {
                evenement.preventDefault();
                alert("Pensez Ă  taper un message !");
                document.getElementById("message").focus();
            }
        });
    </script>
</body>

Notez qu’un <input type='email'> permet aux navigateurs rĂ©cents de vĂ©rifier la structure valide d’un email sans ajout de code JavaScript.

Le code d'email.php

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
		<h1>Contact</h1>
        <p>
        <?php
        $retour=mail(contact@monsite.fr,'Envoi depuis la page contact de monsite.fr', $_POST['message'], 'From:'.$_POST['email']);
        if($retour)
            echo 'Votre message a bien été envoyé !';
        ?>
        </p>
    </body>
</html>

Si vous souhaitez comprendre la fonction mail() du langage PHP, n'hésitez pas à consulter ce support ce cours.

Variante avec l'Ă©vĂšnement onsubmit dans la balise form

Une autre solution, plus traditionnelle, consiste Ă  intĂ©grer l'attribut onsubmit dans la balise form. Si la fonction verif() renvoie la valeur false, alors le formulaire n’exĂ©cutera pas l'action du formulaire et le script email.php ne sera pas lancĂ©.

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<script>
	function verif() {
		if (document.getElementById("email").value=="") {
			alert("Tapez un email valable pour avoir une réponse.");
			document.getElementById("email").focus();
			return false;
		}
		if (document.getElementById("message").value=="") {
			alert("Pensez Ă  taper un message !");
			document.getElementById("message").focus();
			return false;
		}
	}
	</script>
	</head>
	<body>
		<h1>Contact</h1>
		<form method="post" onsubmit="return verif()" action="email.php">
			<label>E-mail : </label>
			<input type="text" id="email" name="email">
			<label> Votre message : </label>
			<textarea id="message" name="message"></textarea>
			<input type="submit">
		</form>
	</body>
</html>

ContrĂŽle d'un champ de texte avec change

L'Ă©vĂšnement change permet de dĂ©tecter qu'un champ a fini d'ĂȘtre saisi. Suite Ă  une saisie, le navigateur dĂ©tectera :

  • l'appui sur la touche entrĂ©e,
  • un clic Ă  l'extĂ©rieur du champ,
  • un appui sur la touche tabulation (perte de focus)

Dans l'exemple ci-dessous, on vérifie la validité d'un ùge :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <label>Tape ton Ăąge</label>   
    <input type="number" id="age">
    <script>
        document.getElementById("age").addEventListener("change", verif);

        function verif() {
            age = document.getElementById("age").value;
            if(age<=10 || age>=120)
                alert("Tapez un Ăąge compris entre 10 et 120 ans");
            else
                alert("Vous avez : " + age + " ans");
        }
    </script>
</body>
</html>

Désactivation du JavaScript et sécurité

Il faut garder Ă  l'esprit que le JavaScript est facilement dĂ©sactivable dans les paramĂštres des navigateurs et par consĂ©quent, ce langage ne permet pas une rĂ©elle sĂ©curitĂ©. C'est la mĂȘme chose pour les CAPTCHAS codĂ©s en JavaScript. Il faudra dans ce cas privilĂ©gier une sĂ©curisation de formulaire avec le langage PHP. Cependant, ces petits contrĂŽles JavaScript permettent dans bien des cas d'Ă©viter les problĂšmes de saisie qui ne sont pas forcĂ©ment malveillants, mais plutĂŽt causĂ©s par des Ă©tourderies de saisies.

Articles connexes