Validation formulaire ajax avec input type file

lolodev · 08/12/2011, 19h28

Bonjour,
j'ai un formulaire avec un input type file, avec une validation simple via jquery puis un appel ajax à un script php qui effectue l'envoi d'un mail avec le fichier uploadé en piece jointe.

voici :

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
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="../../../pagesType/baran-cv/style.css" media="all" />
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
  <script type="text/javascript">
 
  $(document).ready(function() {
    $('#success').hide();
    $('#load').hide();
 
    $('#form').submit(function(){
 
      valid =true;
 
 	  if($('#daten').val()==''){
        $('#daten').prev('.error').fadeIn(1000).text('Fournir une date de naissance');
        valid = false;
      }
	  else if(!$('#daten').val().match(/(\d{2})\/\d{2}\/\d{4}/)){
	  	$('#daten').prev('.error').fadeIn(1000).text('Fournir une date de naissance au bon format jj/mm/aaaa'); 
		valid = false;
	  }
      else{
        $('#daten').prev('.error').slideUp();
      }
 
	  if($('#cv').val()==''){
        $('#cv').prev('.error').fadeIn(1000).text('Fournir un fichier');
        valid = false;
      }
      else{
        $('#cv').prev('.error').slideUp();
      }
 
	   if($('#prenom').val()==''){
        $('#prenom').prev('.error').fadeIn(1000).text('Indiquez votre pr&eacute;nom');
        valid = false;
      }
      else{
        $('#prenom').prev('.error').slideUp();
      }
 
      if($('#nom').val()==''){
        $('#nom').prev('.error').fadeIn(1000).text('Indiquez votre nom');
        valid = false;
      }
      else{
        $('#nom').prev('.error').slideUp();
      }
 
      if(!$('#email').val().match(/^[a-z0-9._-]+@[a-z0-9.-]{2,}[.][a-z]{2,3}$/)){
        $('#email').prev('.error').fadeIn(1000).text('Email invalide');
        valid = false;
      }
 
      else{
        $('#email').prev('.error').slideUp()
      }
 
      if($('#message').val()==''){
        $('#message').prev('.error').fadeIn(1000).text('Indiquez votre message');
        valid = false;
      }
      else{
        $('#message').prev('.error').slideUp();
      }
 
      if(valid==true)
      {
        var nom = $('#nom').val();
        var email = $('#email').val();
        var message = $('#message').val();
        var dataString = 'nom='+nom+'&email='+email+'&message='+message+'&cv='+cv;
 
        $.ajax({
          type: 'POST',
          url: '../../../../pagesType/baran-cv/contact.php',
          data: dataString,
 
          beforeSend: function()
          {
            $('#load').fadeIn();
          },
 
          success: function()
          {
            $('#load').fadeOut();
            $('#form').slideUp();
            $('#success').slideDown();
            $('#success').text('Formulaire OK');
          }
        });
      }
 
      return false;
    });
 
});
 
  </script>
  <title></title>
</head>
<body>
  <div id="content">
 
    <div id="success"></div>
    Nous vous invitons &agrave; t&eacute;l&eacute;charger votre CV sous format Word (ou &eacute;quivalent) :
    <form id="form" action="depot-cv_20.html" method="post" enctype="multipart/form-data">
      <label for="nom"></label>
	  <span class="error"></span>
	  <input type="file" class="file" name="cv"  id="cv" />
 
	  ... &agrave; nous fournir quelques &eacute;l&eacute;ments compl&eacute;mentaires qui nous aideront &agrave; accompagner plus efficacement votre d&eacute;marche :
      <label for="nom">Nom :</label>
      <span class="error"></span>
      <input type="text" name="nom" id="nom" />
      <label for="nom">Pr&eacute;nom :</label>
      <span class="error"></span>
      <input type="text" name="prenom" id="prenom" />
	  <label for="nom">Date de naissance :</label>
      <span class="error"></span>
      <input type="text" name="daten" id="daten" />
	    <label for="nom">Poste recherch&eacute; :</label>
      <span class="error"></span>
      <input type="text" name="poster" id="poster" />
	  <label for="nom">Secteur d'activit&eacute; :</label>
      <span class="error"></span>
      <input type="text" name="secteur" id="secteur" />
	  <label for="nom">Mobilit&eacute; g&eacute;ographique :</label>
      <span class="error"></span>
      <input type="text" name="mobil" id="mobil" />
	  <label for="nom">Niveau de r&eacute;mun&eacute;ration actuel :</label>
      <span class="error"></span>
      <input type="text" name="mobil" id="mobil" />
	  <label for="nom">&Ecirc;tes-vous toujours en poste ? :</label>
      <span class="error"></span>
      <input type="text" name="enposte" id="enposte" />
	  <label for="nom">Si oui, date/d&eacute;lai de disponibilit&eacute; :</label>
      <span class="error"></span>
      <input type="text" name="dispo" id="dispo" />
      <label for="email">Email:</label>
      <span class="error"></span>
      <input type="text" name="email" id="email" />
 
      <label for="message">Message:</label>
      <span class="error"></span>
      <textarea name="message" id="message"></textarea>
 
      <input type="submit" id="submit" class="submit" value="Enregistrer ma candidature" />
    </form>
 
    <div id="load"></div>
 
  </div>
</body>
</html>

PHP :

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
42
$chemin_destination = '/mon chemin/';
 
	if (is_uploaded_file($_FILES['cv']['tmp_name'])) {
 
	if(!move_uploaded_file($_FILES['cv']['tmp_name'], $chemin_destination.$_FILES['cv']['name'])) echo "CANNOT MOVE {$_FILES['cv']['name']}" . PHP_EOL;
	}
 
 
	require("../../../CustomTags/phpmailer/class.phpmailer.php");
  extract($_POST);  
  $nom = strip_tags($nom);
  $email = strip_tags($email);
  $message = strip_tags($message);
	$mail = new PHPmailer();
		$mail->IsSMTP();
		$mail->IsHTML(true);
		$mail->Host='localhost';
		$mail->From=$email;
		$mail->AddAddress('laurent.hermann@citinet.fr'); 
		//$mail->AddAddress( strtolower($row[email]) );
		$mail->Subject= "Demande de candidature" ;
		$message = "<html><body>
						<table border=\"0\" cellpadding=\"2\" cellspacing=\"0\" width=\"90%\">
							<tr>
								<td>
								<font face=verdana size=3 color =black>".nl2br($_POST[nom])."<br></font>
								</td>
							</tr>
						</table></body></html>";
		if ($_FILES['pj']['tmp_name']!="") $mail->AddAttachment("/mon chemin/".$_FILES['cv']['name']);
 
		$mail->Body=$message;
		if(!$mail->Send()){ //Teste le return code de la fonction
		  echo $mail->ErrorInfo; //Affiche le message d'erreur (ATTENTION:voir section 7)
		}
		else{	  
		  echo 'Mail envoy&eacute; avec succ&egrave;s';
		}
		$mail->SmtpClose();
 
	unlink("/mon chemin/".$_FILES[cv]['name']);
	unset($mail);

Le traitement de validation jquery fcte.
Par contre, j'ai un soucis à l'upload;
je ne vois pas bien comment traiter le champ CV de l'upload à l'appel AJAX ??

merci

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email