Afficher message de validation formulaire

Par Loussio le 26 Mai 2020 à 14:01 2 93

Bonjour, j'aimerai faire afficher un message de validation comme par exemple "Message envoyé" à la suite de l'envoi d'un formulaire par un utilisateur. J'ai procédé comme-ci pour la création de mon formulaire : 


- Un formulaire en html et css

- Un contact_process en php (qui s'occupe de m'envoyer un mail qui me montre les données du formulaire)

- Un fichier javascript (qui s'occupe de gérer les champs obligatoires, et autoriser l'accès au fichier "contact_process" pour l'envoi du mail)


Ce que j'aimerais faire, c'est afficher le message en utilisant javascript et non php, puisque j'utilise l'attribut "action" dans mon formulaire html. Et je souhaite garder cet attribut, puisqu'il est en raccord avec le fichier javascript.


Voilà la partie de code javascript : 


$(document).ready(function(){
     
    (function($) {
        "use strict";
 
     
    jQuery.validator.addMethod('answercheck'function (value, element) {
        return this.optional(element) || /^\bcat\b$/.test(value)
    }, "type the correct answer -_-");
 
    // validate contactForm form
    $(function() {
        $('#contactForm').validate({
            rules: {
                name: {
                    requiredtrue,
                    minlength: 2
                },
                subject: {
                    requiredtrue,
                    minlength: 4
                },
                number: {
                    requiredtrue,
                    minlength: 5
                },
                email: {
                    requiredtrue,
                    emailtrue
                },
                message: {
                    requiredtrue,
                    minlength: 20
                }
            },
            messages: {
                name: {
                    required"Veuillez inscrire votre nom et prénom",
                    minlength"Ce champ doit être complété avec 2 caractères au minimum"
                },
                subject: {
                    required"Veuillez inscrire le sujet",
                    minlength"Votre sujet doit contenir au moins 4 caractères"
                },
                 
                email: {
                    required"Veuillez inscrire votre e-mail"
                },
                message: {
                    required"Veuillez inscrire votre message",
                    minlength"Votre message doit être plus long"
                }
            },
            submitHandlerfunction(form) {
                $(form).ajaxSubmit({
                    type:"POST",
                    data: $(form).serialize(),
                    url:"contact_process.php",
                    successfunction() {
                        $('#contactForm :input').attr('disabled''disabled');
                        $('#contactForm').fadeTo( "slow", 1function() {
                            $(this).find(':input').attr('disabled''disabled');
                            $(this).find('label').css('cursor','default');
                            $('#success').fadeIn()
                            $('.modal').modal('hide');
                            $('#success').modal('show');
                        })
                    },
                    errorfunction() {
                        $('#contactForm').fadeTo( "slow", 1function() {
                            $('#error').fadeIn()
                            $('.modal').modal('hide');
                            $('#error').modal('show');
                        })
                    }
                })
            }
        })
    })
         
 })(jQuery)
})


Et le code "contact_process.php" : 


<?php
 
    $to = "adressemail@exemple.com";
    $from = $_REQUEST['email'];
    $name = $_REQUEST['name'];
    $csubject = $_REQUEST['subject'];
    $number = $_REQUEST['number'];
    $cmessage = $_REQUEST['message'];
     
    $subject = "Admin : Vous avez un nouveau message.";
 
    $headers = "From: $from";
    $headers = "From: " . $from . "\r\n";
    $headers .= "Reply-To: ". $from . "\r\n";
    $headers .= "MIME-Version: 1.0\r\n";
    $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
 
 
    $logo = 'img/logo.png';
    $link = '#';
 
    $body = "<!DOCTYPE html><html lang='en'><head><meta charset='UTF-8'><title>Express Mail</title></head><body>";
    $body .= "<table style='width: 100%;'>";
    $body .= "<thead style='text-align: center;'><tr><td style='border:none;' colspan='2'>";
    $body .= "<a href='{$link}'><img src='{$logo}' alt=''></a><br><br>";
    $body .= "</td></tr></thead><tbody><tr>";
    $body .= "<td style='border:none;'><strong>Name:</strong> {$name}</td>";
    $body .= "<td style='border:none;'><strong>Email:</strong> {$from}</td>";
    $body .= "<td style='border:none;'><strong>Sujet:</strong> {$csubject}</td>";
    $body .= "</tr>";
    $body .= "<tr><td style='border:none;'><strong>Message:</strong> {$cmessage}</td></tr>";
    $body .= "<tr><td></td></tr>";
    $body .= "</tbody></table>";
    $body .= "</body></html>";
 
    $send = mail($to, $subject, $body, $headers);
    echo "L'email a été envoyé.";
?>


Et enfin, la petite partie de code html qui monte l'attribut "action" :


<form class="form-contact contact_form" action="contact_process.php" method="post" id="contactForm" novalidate="novalidate">


Merci de m'aider, ça serait vraiment cool !

Cette pub permet au site de vivre ...

2 commentaires

Hello @Loussio,


Je pense que cet article de formation pourrait t'aider 😉

Je tiens à te dire que cette vérification doit être aussi faite en PHP car JavaScript peut être modifier par le client. Cette vérification ne sert donc qu'à prévenir le client avant qu'il n’envoi le formulaire !

Pour la vérification en PHP, c'est cet article qui pourra t'aider 😉

J'ai ajouté du php dans mon fichier html car il n'y a que ça comme solution... Maintenant, j'aimerais savoir quelle ligne de code il faudrait rajouter ici :


<?php


    $to = "lionelnarinsamy@gmail.com";
    $from = $_REQUEST['email'];
    $name = $_REQUEST['name'];
    $csubject = $_REQUEST['subject'];
    $number = $_REQUEST['number'];
    $cmessage = $_REQUEST['message'];
    
    $subject = "Couleurskfé.re : Vous avez un nouveau message.";


    $headers = "From: $from";
	$headers = "From: " . $from . "\r\n";
	$headers .= "Reply-To: ". $from . "\r\n";
	$headers .= "MIME-Version: 1.0\r\n";
	$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";




    $logo = 'img/logo.png';
    $link = '#';


	$body = "<!DOCTYPE html><html lang='en'><head><meta charset='UTF-8'><title>Express Mail</title></head><body>";
	$body .= "<table style='width: 100%;'>";
	$body .= "<thead style='text-align: center;'><tr><td style='border:none;' colspan='2'>";
	$body .= "<a href='{$link}'><img src='{$logo}' alt=''></a><br><br>";
	$body .= "</td></tr></thead><tbody><tr>";
	$body .= "<td style='border:none;'><strong>Name:</strong> {$name}</td>";
	$body .= "<td style='border:none;'><strong>Email:</strong> {$from}</td>";
	$body .= "<td style='border:none;'><strong>Sujet:</strong> {$csubject}</td>";
	$body .= "</tr>";
	$body .= "<tr><td style='border:none;'><strong>Message:</strong> {$cmessage}</td></tr>";
	$body .= "<tr><td></td></tr>";
	$body .= "</tbody></table>";
	$body .= "</body></html>";


    $send = mail($to, $subject, $body, $headers);
?>


J'aimerais rajouter une variable "If" et "echo" lorsque le message a été envoyé (donc forcément en rapport avec $send) et la variable "else" et "echo" lorsqu'il y a un problème.


Merci d'avance!

Cette pub permet au site de vivre ...