Formulaire - upload fichier - javascipt validation

Bonjour,

J'utilise un formulaire où les champs sont validé par un fichier javascript.

Je souhaite ajouter un champs pour uploader un fichier qui sera joint au courriel généré par le fichier php qui traite les données du formulaire.

à la base si je fais pointer mon formulaire directement vers le fichier php qui traite les données reçu du formulaire sa fonctionne.

Cependant, dès que je fais passer le formulaire par la validation javascipt le upload ne fonctionne pas. Je reçois un courriel contenant toutes les données du formulaire sauf le fichier qui devraient être joint.

Pouvez-vous m'aider svp?

Merci!

Voici mon formulaire:

Code:

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
 <script src="js/jquery-1.7.1.min.js"></script>
 
    <script src="js/forms.js" type="text/javascript"></script>
<script type="text/javascript">
 
   $(window).load(function(){
 
       $('#contact-form').forms({
 
         ownerEmail:'m24s69@gmail.com'
 
         })
 
   })
 
</script>
                            <form id="contact-form" enctype="multipart/form-data">
                                <div class="success">
                                    Contact form submitted!<br>
                                    <strong>We will be in touch soon.</strong>
                                </div>
                                <fieldset>
                                    <label class="name">
                                        <input type="text" value="Enter name">
                                        <span class="error">*This is not a valid name.</span> <span class="empty">*This field is required.</span>
                                    </label>
                                    <label class="email">
                                        <input type="text" value="Enter e-mail">
                                        <span class="error">*This is not a valid email address.</span> <span class="empty">*This field is required.</span>
                                    </label>
                                    <label class="phone">
                                        <input type="tel" value="Enter phone">
                                        <span class="error">*This is not a valid phone number.</span> <span class="empty">*This field is required.</span>
                                    </label>
                                    <label class="message">
                                        <textarea>Enter message</textarea>
                                        <span class="error">*The message is too short.</span> <span class="empty">*This field is required.</span>
                                    </label><br>                                  <label class="uploaded_file"><br>                                     Photo des travaux &agrave; faire:<input type="file" name="uploaded_file" id="uploaded_file" /><br>                                    </label>  <div class="buttons-wrapper">
                                        <a class="link" data-type="reset">Clear</a>
                                        <a class="link" data-type="submit">Send</a>
                                    </div>
                                </fieldset>
                            </form>

Le fichier form.js:

Code:

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
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
//forms
;(function($){
    $.fn.forms=function(o){
        return this.each(function(){
            var th=$(this)
                ,_=th.data('forms')||{
                    errorCl:'error',
                    emptyCl:'empty',
                    invalidCl:'invalid',
                    notRequiredCl:'notRequired',
                    successCl:'success',
                    successShow:'4000',
                    mailHandlerURL:'bat/MailHandler.php',
                    ownerEmail:'support@guardlex.com',
                    stripHTML:true,
                    smtpMailServer:'localhost',
                    targets:'input,textarea',
                    controls:'a[data-type=reset],a[data-type=submit]',
                    validate:true,
                    rx:{
                        ".name":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},
                        ".state":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},
                        ".email":{rx:/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i,target:'input'},
                        ".phone":{rx:/^\+?(\d[\d\-\+\(\) ]{5,}\d$)/,target:'input'},
                        ".fax":{rx:/^\+?(\d[\d\-\+\(\) ]{5,}\d$)/,target:'input'},
                        ".message":{rx:/.{20}/,target:'textarea'}
                    },
                    preFu:function(){
                        _.labels.each(function(){
                            var label=$(this),
                                inp=$(_.targets,this),
                                defVal=inp.val(),
                                trueVal=(function(){
                                            var tmp=inp.is('input')?(tmp=label.html().match(/value=['"](.+?)['"].+/),!!tmp&&!!tmp[1]&&tmp[1]):inp.html()
                                            return defVal==''?defVal:tmp
                                        })()
                            trueVal!=defVal
                                &&inp.val(defVal=trueVal||defVal)
                            label.data({defVal:defVal})                            
                            inp
                                .bind('focus',function(){
                                    inp.val()==defVal
                                        &&(inp.val(''),_.hideEmptyFu(label),label.removeClass(_.invalidCl))
                                })
                                .bind('blur',function(){
                                    _.validateFu(label)
                                    if(_.isEmpty(label))
                                        inp.val(defVal)
                                        ,_.hideErrorFu(label.removeClass(_.invalidCl))                                         
                                })
                                .bind('keyup',function(){
                                    label.hasClass(_.invalidCl)
                                        &&_.validateFu(label)
                                })
                            label.find('.'+_.errorCl+',.'+_.emptyCl).css({display:'block'}).hide()
                        })
                        _.success=$('.'+_.successCl,_.form).hide()
                    },
                    isRequired:function(el){                           
                        return !el.hasClass(_.notRequiredCl)
                    },
                    isValid:function(el){                          
                        var ret=true
                        $.each(_.rx,function(k,d){
                            if(el.is(k))
                                ret=d.rx.test(el.find(d.target).val())                                     
                        })
                        return ret                         
                    },
                    isEmpty:function(el){
                        var tmp
                        return (tmp=el.find(_.targets).val())==''||tmp==el.data('defVal')
                    },
                    validateFu:function(el){                           
                        el.each(function(){
                            var th=$(this)
                                ,req=_.isRequired(th)
                                ,empty=_.isEmpty(th)
                                ,valid=_.isValid(th)                               
 
                            if(empty&&req)
                                _.showEmptyFu(th.addClass(_.invalidCl))
                            else
                                _.hideEmptyFu(th.removeClass(_.invalidCl))
 
                            if(!empty)
                                if(valid)
                                    _.hideErrorFu(th.removeClass(_.invalidCl))
                                else
                                    _.showErrorFu(th.addClass(_.invalidCl))                            
                        })
                    },
                    getValFromLabel:function(label){
                        var val=$('input,textarea',label).val()
                            ,defVal=label.data('defVal')                               
                        return label.length?val==defVal?'nope':val:'nope'
                    }
                    ,submitFu:function(){
                        _.validateFu(_.labels)                         
                        if(!_.form.has('.'+_.invalidCl).length)
                            $.ajax({
                                type: "POST",
                                url:_.mailHandlerURL,
                                data:{
                                    name:_.getValFromLabel($('.name',_.form)),
                                    email:_.getValFromLabel($('.email',_.form)),
                                    phone:_.getValFromLabel($('.phone',_.form)),
                                    fax:_.getValFromLabel($('.fax',_.form)),
                                    state:_.getValFromLabel($('.state',_.form)),
                                    message:_.getValFromLabel($('.message',_.form)),
                                    owner_email:_.ownerEmail,
                                    stripHTML:_.stripHTML
                                },
                                success: function(){
                                    _.showFu()
                                }
                            })         
                    },
                    showFu:function(){
                        _.success.slideDown(function(){
                            setTimeout(function(){
                                _.success.slideUp()
                                _.form.trigger('reset')
                            },_.successShow)
                        })
                    },
                    controlsFu:function(){
                        $(_.controls,_.form).each(function(){
                            var th=$(this)
                            th
                                .bind('click',function(){
                                    _.form.trigger(th.data('type'))
                                    return false
                                })
                        })
                    },
                    showErrorFu:function(label){
                        label.find('.'+_.errorCl).slideDown()
                    },
                    hideErrorFu:function(label){
                        label.find('.'+_.errorCl).slideUp()
                    },
                    showEmptyFu:function(label){
                        label.find('.'+_.emptyCl).slideDown()
                        _.hideErrorFu(label)
                    },
                    hideEmptyFu:function(label){
                        label.find('.'+_.emptyCl).slideUp()
                    },
                    init:function(){
                        _.form=_.me                    
                        _.labels=$('label',_.form)
 
                        _.preFu()
 
                        _.controlsFu()
 
                        _.form
                            .bind('submit',function(){
                                if(_.validate)
                                    _.submitFu()
                                else
                                    _.form[0].submit()
                                return false
                            })
                            .bind('reset',function(){
                                _.labels.removeClass(_.invalidCl)                                  
                                _.labels.each(function(){
                                    var th=$(this)
                                    _.hideErrorFu(th)
                                    _.hideEmptyFu(th)
                                })
                            })
                        _.form.trigger('reset')
                    }
                }
            _.me||_.init(_.me=th.data({forms:_}))
            typeof o=='object'
                &&$.extend(_,o)
        })
    }
})(jQuery)
$(window).load(function(){
    $('#contact-form').forms({
        ownerEmail:'#'
    })
})

Le fichier php qui traite mes données:

Code:

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
<?php
// Pear library includes
// You should have the pear lib installed
include_once('Mail.php');
include_once('Mail/mime.php');
//  $owner_email = $_POST["owner_email"];
    $owner_email = "m24s69@gmail.com";
//  $owner_email = "pascalb696@gmail.com";
    $upload_folder = '../uploads/'; //<-- this folder must be writeable by the script
    $headers = 'From:' . $_POST["email"];
    $subject = 'Une demande de soumission provenant de ' . $_POST["prenom"] . $_POST["name"];
    $messageBody = "";
    //----FILE UPLOAD FILE ----//
    //Get the uploaded file information
    $name_of_uploaded_file =    basename($_FILES['uploaded_file']['name']);
 
    //get the file extension of the file
    $type_of_uploaded_file =    substr($name_of_uploaded_file,    strrpos($name_of_uploaded_file, '.') + 1);
 
    $size_of_uploaded_file =    $_FILES["uploaded_file"]["size"]/1024;//size in KBs
 
    //Settings
    $max_allowed_file_size = 7000; // size in KB
    $allowed_extensions = array("jpg", "jpeg", "gif", "bmp");
 
    //Validations
    if($size_of_uploaded_file > $max_allowed_file_size )
    {
      $errors .= "\n Size of file should be less than $max_allowed_file_size";
    }  
 
//------ Validate the file extension -----
$allowed_ext = false;
for($i=0; $i<sizeof($allowed_extensions); $i++)
{
  if(strcasecmp($allowed_extensions[$i],$type_of_uploaded_file) == 0)
  {
    $allowed_ext = true;
  }
}
 
if(!$allowed_ext)
{
  $errors .= "\n The uploaded file is not supported file type. ".
  " Only the following file types are supported: ".implode(',',$allowed_extensions);
}
 
//copy the temp. uploaded file to uploads folder
$path_of_uploaded_file = $upload_folder . $name_of_uploaded_file;
$tmp_path = $_FILES["uploaded_file"]["tmp_name"];
 
if(is_uploaded_file($tmp_path))
{
  if(!copy($tmp_path,$path_of_uploaded_file))
  {
    $errors .= '\n error while copying the uploaded file';
  }
}
else
{
    $errors .= '\n file isnt uploaded';
}
 
    //----FIN UPLOAD FILE ----//
 
    if($_POST['name']!='nope'){
        $messageBody .= '<p>Nom: ' . $_POST["name"] . '</p>' . "\n";
        $messageBody .= '<br>' . "\n";
    }
    if($_POST['prenom']!='nope'){
        $messageBody .= '<p>Prénom: ' . $_POST["prenom"] . '</p>' . "\n";
        $messageBody .= '<br>' . "\n";
    }
    if($_POST['entreprise']!='nope'){
        $messageBody .= '<p>Entreprise: ' . $_POST["entreprise"] . '</p>' . "\n";
        $messageBody .= '<br>' . "\n";
    }
    if($_POST['lieu']!='nope'){
        $messageBody .= '<p>Lieu des travaux: ' . $_POST["lieu"] . '</p>' . "\n";
        $messageBody .= '<br>' . "\n";
    }
    if($_POST['type_travaux']!='nope'){
        $messageBody .= '<p>Type de travaux: ' . $_POST["type_travaux"] . '</p>' . "\n";
        $messageBody .= '<br>' . "\n";
    }
    if($_POST['type_isolant']!='nope'){
        $messageBody .= '<p>Type d\'isolant: ' . $_POST["type_isolant"] . '</p>' . "\n";
        $messageBody .= '<br>' . "\n";
    }
    if($_POST['date_travaux']!='nope'){
        $messageBody .= '<p>Date des travaux: ' . $_POST["date_travaux"] . '</p>' . "\n";
        $messageBody .= '<br>' . "\n";
    }
    if($_POST['email']!='nope'){
        $messageBody .= '<p>Courriel: ' . $_POST['email'] . '</p>' . "\n";
        $messageBody .= '<br>' . "\n";
    }else{
        $headers = '';
    }
    if($_POST['state']!='nope'){       
        $messageBody .= '<p>Province: ' . $_POST['state'] . '</p>' . "\n";
        $messageBody .= '<br>' . "\n";
    }
    if($_POST['phone']!='nope'){       
        $messageBody .= '<p>Téléphone: ' . $_POST['phone'] . '</p>' . "\n";
        $messageBody .= '<br>' . "\n";
    }  
    if($_POST['fax']!='nope'){     
        $messageBody .= '<p>Télécopieur: ' . $_POST['fax'] . '</p>' . "\n";
        $messageBody .= '<br>' . "\n";
    }
    if($_POST['message']!='nope'){
        $messageBody .= '<p>Message: ' . $_POST['message'] . '</p>' . "\n";
    }
 
 
    if($_POST["stripHTML"] == 'true'){
        $messageBody = strip_tags($messageBody);
    }
 
 
    $message = new Mail_mime();
 
    $message->setTXTBody($messageBody);
 
    $message->addAttachment($path_of_uploaded_file);
 
    $body = $message->get();
 
    $extraheaders = array("From"=>$from, "Subject"=>$subject,"Reply-To"=>$_POST["email"]);
 
    $headers = $message->headers($extraheaders);
 
    $mail = Mail::factory("mail");
 
    $mail->send($owner_email, $headers, $body);
 
    /*try{
        if(!mail($owner_email, $subject, $messageBody, $headers)){
            throw new Exception('mail failed');
        }else{
            echo 'mail sent';
        }
    }catch(Exception $e){
        echo $e->getMessage() ."\n";
    }*/
    ?>