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.

See the Pen
Simple jquery-validate form by blindDev (@yuyazz)
on CodePen.

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. L’idée est d’afficher un formulaire avec un message de succès caché. A la soumission du formulaire on cache ce dernier et on affiche le message.

La vérification des données en php

Voici le code à insérer dans un fichier php à part, qu’on va appeler form-process.php. Le code est appliqué au formulaire donné en exemple.

<?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 monsite.com";
 
// 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;
    }
}

?>

Les fonctions js de vérification

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

$("#contact").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
     
	$("#contact").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();
				  } 
			  }
		  });
}

La fonction finale js + php

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. Les lignes sont commentées pour une meilleure compréhension.

function formSuccess(){  // voici la fonction "formSuccess" : en cas de soumission du formulaire, une fois les conditions passées, on envoie le formulaire et on affiche à la place du formulaire la div cachée contenant le message de succès.
	$("#contact").hide().html("#msgSubmit");
	$( "#msgSubmit" ).removeClass( "hidden" );	
}


$(function() {
 
  $("form[name='contact']").validate({
       rules: {
      // Chque input a un attribut "name" que l'on reprend ici pour la vérification
      nom: "required",
      prenom: "required",
      tel:{
       required: true,
      number: true
      },
      email: {
        required: true,
        // ono applique ici les règles d'email définies par le plugin
        email: true
      },
      message:"required"
    },
    // On définit ici les messages d'erreur propre à chaque champ
    messages: {
      nom: "veuillez insérer votre nom",
      prenom: "veuillez insérer votre prénom",
      entreprise:"veuillez indiquer une entreprise",
      tel: 'veuillez insérer un numéro de téléphone',
      email: "veuillez insérer une adresse mail valide",
      message:"veuillez remplir ce champ"
    },
    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", // on envoie le tout dans la moulinette php du fichier form-process.php pour l'envoi du message
			  data: "name=" + name + "&email=" + email +"&tel=" + tel + "&entreprise=" + entreprise + "&message=" + message,
			  success : function(text){
				  if (text == "success"){ //si c'est ok, applique la fonction formSuccess
					  formSuccess();
				  } 
			  }
		  });
		}
	});
});

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

Mis à jour le Par Copier coller | Dans jQuery