Bonjour,

Je suis entrain de faire un formulaire de contact en HTML/PHP/AJAX, mais je rencontre un soucis.

Dans le fichier PHP je récupère mes erreurs du formulaire via $errors = []; si je fais un var_dump de $errors , j'ai bien mes erreurs dedans, le problème, c'est que si je fais un foreach dans mon formulaire HTML, les erreurs ne vont pas s'afficher, d'habitude ça marche niquel si je ne passe par AJAX.

La solution par laquelle j'ai commencé est d'afficher chaques erreurs en dessous de chaque champs du formulaire, mais je n'aime pas trop cette facon de faire...

Y a t'il une solution, en AJAX pour récuperer toute mes erreurs et les afficher toute dans une même div les une en dessous des autres au dessus de mon formulaire par exemple ?

Cordialement.

Voici mon code:

HTML (contact.php):
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/menu.css">
  <link rel="stylesheet" href="css/style.css">
  <link href='http://fonts.googleapis.com/css?family=Holtwood+One+SC' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="js/lightbox.js"></script>
  <link rel="stylesheet" href="css/lightbox.css">
  <script src="js/contact.js"></script>
</head>
 
<body>
 
 
<div class="wrapper-connexion">
 
	<h1 class="text-logo">Me contacter</h1>
 
  <br>
 
<div class="erreurs"></div>
 
 
                      <?php if(!empty($errors)): ?> 
                    <div class="flash flash-danger">   
                        <?php foreach($errors as $error): ?>
                             <?= $error; ?><br>
                        <?php endforeach; ?>
                    </div>
                  <?php endif; ?>
 
	<form id="form-contact" class="formulaire-inscription" action="contact-form.php" method="POST">
 
    <div class="content">
 
	  <input id="nom" type="text" class="form-control-connexion" name="nom" placeholder="Nom *">	
          <input id="submit" class="bouton bouton-success" type="submit" value="Envoyer">
 
	</form>
 
</div> <!-- FIN div WRAPPER -->
 
 
 
</body>
</html>

PHP (contact-traite.php):
Code php : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<?php 
 
 
if(!empty($_POST)) {
 
	$errors = [];
 
// 
// NOM
// 
 
if(empty($_POST['nom']) || !preg_match('/^[a-zA-Z0-9_]+$/', $_POST['nom'])) {
	$errors['nom'] = "<div class='flash flash-danger'>Vous devez remplir le champ nom.</div>";
}
 
// // 
// // PRENOM
// // 
 
// if(empty($_POST['prenom']) || !preg_match('/^[a-zA-Z0-9_]+$/', $_POST['prenom'])) {
// 	$errors['prenom'] = "<div class='flash flash-danger'>Vous devez remplir le champ prenom.</div>";
// }
 
 
// // 
// // EMAIL
// // 
 
// if(empty($_POST['email']) || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
// 	$errors['email'] = "<div class='flash flash-danger'>L'e-mail n'est pas valide ou n'est pas rempli.</div>";
// }
 
 
// // 
// // MESSAGE
// // 
 
// if(empty($_POST['message'])) {
// 	$errors['message'] = "<div class='flash flash-danger'>Vous devez remplir le champ message.</div>";
// }
 
var_dump($errors);
 
}
 
 
if(empty($errors)) {
 
$email 		= "flodereims@yahoo.fr";
$sujet		= "Demande d'informations MESCREATIONS02";
$header 	= 'Mime-Version 1.0' . "\r\n";
$header		.= 'Content-type: text/html; charset=utf-8' . "\r\n";
$header		.= "\r\n";
 
$message 	= $_POST['message'];
$message 	.= '<b>Envoyer par: </b> : ' . $_POST['email'];
 
mail($email, $sujet, $message, $header);
echo "<div class='flash flash-success'>L'e-mail à bien été envoyé.</div>";
 
}
 
 
 
 
 
?>

AJAX:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
  $(document).ready(function() {
 
  $("#form-contact").submit(function() {
 
    var action  = $(this).attr("action");
    var nom     = $("#nom").val();
    // var prenom  = $("#prenom").val();
    // var email   = $("#email").val();
    // var message = $("#message").val();
 
    $(".erreurs").slideUp('800', function() {
 
      $("input[type='submit']").hide().after('<img src="images/icons/ajax-loader.gif" class="loader">');
 
      $.post( action, {
 
        nom: nom
        // prenom: prenom,
        // email: email,
        // message: message
 
      }, function(data) {
 
        $(".erreurs").html(data);
        $(".erreurs").slideDown('800');
        $(".loader").fadeOut();
        $("input[type='submit']").fadeIn();
 
        if(data.match('success') != null) {
          $('#form-contact').hide();
        }
 
      });
 
    });
 
    return false;
 
  });
 
});