"/>

Valider ses formulaires avec jquery validate

Comment valider ses formulaires avec jquery validate ?

Dans ce tuto on va voir comment on peut valider un formulaire html/css en un temps record, grâce au plugin jquery.validate.js. Il en existe beaucoup d’autres, comme validate.js, et il est également possible de le faire en javascript natif, comme le montre le site W3shools.

Jquery.Validate.js a l’avantage d’être super rapide à mettre en place. C’est parti.

Notre formulaire

Voici donc un formulaire, tout ce qu’il y a de plus banal

<form role="form" id="contactForm" name="contact">						
	<div class="form-group">
		<label for="name" class="h4">
			<input type="text" class="form-control" name="name" id="name" placeholder=" Votre Nom et prénom" required>
		</label>
	</div>
	<div class="form-group">
		<label for="email" class="h4">
			<input type="email" class="form-control" name="email" id="email" placeholder="Votre Email" required>
		</label>
	</div>
	<div class="form-group">
		<label for="tel" class="h4">
			<input type="tel" class="form-control" name="tel" id="tel" placeholder="Votre Numéro de téléphone" required>
		</label>
	</div>
	<div class="form-group">
		<label for="entreprise" class="h4">
			<input type="text" class="form-control" name="entreprise" id="entreprise" placeholder="Votre Entreprise" required>
		</label>
	</div>

	<div class="form-group">
		<label for="message" class="h4 ">
			<textarea id="message" class="form-control" rows="5" name="message" placeholder="Votre message" required></textarea>
		</label>
	</div>


	<button type="submit" id="form-submit" class="btn blue_bg btn-lg pull-right ">Envoyer</button>

</form>

Ce formulaire a pour ID : contactForm, et chaque input a son « name » dédié.

L’appel du script jquery.validate.js

Première chose à faire, dans son fichier html, on appelle le plugin : d’abord jquery, puis notre plugin de vérification.

<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/jquery.validate.min.js"></script>

Les fonctions de vérification et d’envoi

Dans un fichier à part, et en suivant la doc, on vérifie un à un chaque input :

$(function() {
 
  $("form[name='contact']").validate({
		rules: {  //déclaration des règles pour chaque input
			  name: "required",
			  entreprise:"required",
			  email: {
				required: true,
				email: true
			  },
			  tel: {
				required: true,
				number: true,
				minlength:10
			  }
			},
			// les message d'erreurs pour chaque input
			messages: {
				required: "Ce champs est requis",
				name: "Veuillez renseigner votre nom",
				message:"Veuillez renseigner ce champs",
				entreprise: "Veuillez renseigner votre entreprise",
				tel: {
					required:"Veuillez renseigner votre numéro de téléphone",			
					number:"Ce champs n'accepte que les numéros de téléphone et sans espaces !",
					minlength:"Votre numéro de téléphone doit contenir au moins 10 chiffres" 
				},
				email:{
					required:"Veuillez renseigner votre adresse email",
					email: "Veuillez renseigner une adresse email valide"
				},
			},
			submitHandler: function(form) {
				 submitHandler: function(form) {
			  form.submit();
			}
		}
	});
});

Les messages d’erreur

Généralement, les messages d’erreurs sont affichés en rouge. On le précise donc dans le css en ciblant la classe « error« .

.error {
  color: #ff0000;
}

 

Comment faire dans le cas d’un formulaire avec vérification et envoi en ajax/ php ?

Si vous partez d’un formulaire classique en php, avec une validation en ajax, voici une piste pour faire fonctionner les deux ensembles. Ici je me base sur l’exemple fourni par le site tutsplus.

Notre fichier php

<?php
$errorMSG = "";
 
// NAME
if (empty($_POST["name"])) {
    $errorMSG = "Veuillez indiquer votre Nom et Prénom";
} else {
    $name = $_POST["name"];
}
 
// EMAIL
if (empty($_POST["email"])) {
    $errorMSG .= "Veuillez indiquer votre Email";
} else {
    $email = $_POST["email"];
}

// TEL
if (empty($_POST["tel"])) {
    $errorMSG .= "Veuillez indiquer votre numéro de téléphone";
} else {
    $tel = $_POST["tel"];
}

// ENTREPRISE
if (empty($_POST["entreprise"])) {
    $errorMSG .= "Veuillez indiquer votre entreprise";
} else {
    $entreprise = $_POST["entreprise"];
}


// MESSAGE
if (empty($_POST["message"])) {
    $errorMSG .= "Message is required ";
} else {
    $message = $_POST["message"];
}
 
 
$name = $_POST["name"];
$email = $_POST["email"];
$tel = $_POST["tel"];
$entreprise = $_POST["entreprise"];
$message = $_POST["message"];
 
$EmailTo = "votreemail@gmail.com,autreemail@hotmail.fr";
$Subject = "Nouveau message de ecosens-formations";
 
// le corps du mail
$Body .= "Name: ";
$Body .= $name;
$Body .= "\n";
 
$Body .= "Email: ";
$Body .= $email;
$Body .= "\n";
 
$Body .= "Tel: ";
$Body .= $tel;
$Body .= "\n";

$Body .= "Entreprise: ";
$Body .= $entreprise;
$Body .= "\n";

$Body .= "Message: ";
$Body .= $message;
$Body .= "\n";
 
// envoi email
$success = mail($EmailTo, $Subject, $Body, "From:".$email);
 
// redirection vers le message de validation
if ($success && $errorMSG == ""){
   echo "success";
}else{
    if($errorMSG == ""){
        echo "Something went wrong :(";
    } else {
        echo $errorMSG;
    }
}

?>

Notre fichier js

Si l’on suit le tutoriel de Tutsplus, voici le fichier html dépouillé, sans l’utilisation de bootstrap validator et tout le reste.

$("#contactForm").submit(function(event){
    
    event.preventDefault();
    submitForm();
});
function formSuccess(){ // ici des évènements qui s'actionnent lors de l'envoi du formulaire, typiquement, je cache le formulaire et le bouton d'envoi, et insère un message de validation à la place
  $(".mandatory").hide();    
	$("#contactForm").hide().html("#msgSubmit");
	$( "#msgSubmit" ).removeClass( "hidden" );
	
}
function submitForm(){
	var name = $("#name").val();
		var email = $("#email").val();
		var tel = $("#tel").val();
		var entreprise = $("#entreprise").val();
		var message = $("#message").val();
 
		 $.ajax({
			  type: "POST",
			  url: "form-process.php",
			  data: "name=" + name + "&email=" + email +"&tel=" + tel + "&entreprise=" + entreprise + "&message=" + message,
			  success : function(text){
				  if (text == "success"){
					  formSuccess();
				  } 
			  }
		  });
}

Puisqu’on se retrouve avec deux fonctions d’envoi, celle en ajax et celle du plugin jquery.validate.js, il va falloir mixer le tout : voici donc la version finalisée du fichier js

function formSuccess(){
  $(".mandatory").hide();    
	$("#contactForm").hide().html("#msgSubmit");
	$( "#msgSubmit" ).removeClass( "hidden" );
	
}


$(function() {
 
  $("form[name='contact']").validate({
    rules: {  
      name: "required",
      entreprise:"required",
      email: {
        required: true,
        email: true
      },
      tel: {
        required: true,
		number: true,
		minlength:10
      }
    },
    // les messages d'erreur pour chaque input
    messages: {
		required: "Ce champs est requis",
		name: "Veuillez renseigner votre nom",
		message:"Veuillez renseigner ce champs",
		entreprise: "Veuillez renseigner votre entreprise",
		tel: {
			required:"Veuillez renseigner votre numéro de téléphone",			
			number:"Ce champs n'accepte que les numéros de téléphone et sans espaces !",
			minlength:"Votre numéro de téléphone doit contenir au moins 10 chiffres" 
		},
		email:{
			required:"Veuillez renseigner votre adresse email",
			email: "Veuillez renseigner une adresse email valide"
		},
	},
    submitHandler: function(form) {
	//la fonction ajax insérée dans le submitHandler de jquery.validate
		var name = $("#name").val();
		var email = $("#email").val();
		var tel = $("#tel").val();
		var entreprise = $("#entreprise").val();
		var message = $("#message").val();
 
		 $.ajax({
			  type: "POST",
			  url: "form-process.php",
			  data: "name=" + name + "&email=" + email +"&tel=" + tel + "&entreprise=" + entreprise + "&message=" + message,
			  success : function(text){
				  if (text == "success"){
					  formSuccess();
				  } 
			  }
		  });
		}
	});
});

Avec ca, vous devriez donc avoir la vérification html5 et celle du js côté client, et la vérification php côté serveur !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.