bonsoir

Je desire modifier mon formulaire pour que la validation se fasse grâce a un type button mais après plusieurs essais cela ne fonctionne pas,

avec le formulaire comme ca et le jquery tout fonctionne, mais pour différentes raisons je dois le modifier en en button.

Voici les code;

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
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
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
<!DOCTYPE html>
<html>
 
<form id="contact">
 
    <div style="color: #ffff;"> * Champs Obligatoires </div>
    <div style="color: #000;">
        <div class="row">
            <div class="col-md-12 col-sm-12">
                <div class="row">
                    <div class="col-md-4 col-sm-4">
                        <div class="form-group">
                            <div class="libelle">Civilité*</div> <select name="titre">
<option value='0'>- </option> 
                              <option value='5'>Docteur </option>
                             <option value='2'>Mademoiselle </option>
                             <option value='6'>Maître </option>
                             <option value='3'>Madame </option>
                             <option value='1'>Monsieur </option>
                              <option value='7'>Monsieur et Madame </option>          </select>
                        </div>
                    </div>
                </div>
 
                <div class="row">
                    <div class="col-md-6 col-sm-6">
                        <div class="form-group">
                            <div class="libelle">Nom*</div>
                            <input type="text" name="nom" value="" minlength="2" required>
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-6">
                        <div class="form-group">
                            <div class="libelle">Prénom*</div>
                            <input type="text" name="prenom" value="" minlength="2" required>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 col-sm-6">
                        <div class="form-group">
                            <div class="libelle">Email*</div>
                            <input type="text" name="email" value="" minlength="5" required>
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-6">
                        <div class="form-group">
                            <div class="libelle">Téléphone*</div>
                            <input type="text" name="telephone" value="" minlength="10" required>
                        </div>
                    </div>
                </div>
 
                <div class="row">
                    <div class="col-md-5 col-sm-5">
                        <div class="form-group">
                            <div class="libelle">Adresse*</div>
                            <input type="text" name="adresse" minlength="10" required>
                        </div>
                    </div>
                    <div class="col-md-2 col-sm-2">
                        <div class="form-group">
                            <div class="libelle">CP* </div>
                            <input type="text" name="code_postal" minlength="5" required>
                        </div>
                    </div>
                    <div class="col-md-2 col-sm-2">
                        <div class="form-group">
                            <div class="libelle">Ville*</div>
                            <input type="text" name="ville_particulier" minlength="3" required>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-3">
                        <div class="form-group">
                            <div class="libelle">Date de naissance* </div> <input type="text" name="date_de_naissance_particulier" placeholder="JJ-MM-AAAA" required>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4 col-sm-4">
                        <div class="form-group">
                            <div class="libelle">Catégorie Professionnelle*</div> <select name="profession" required>
                  <option value='0'>- </option> <option value='11'>Artisan-Commerçant</option><option value='24'>Assistante Maternelle</option><option value='20'>CDD</option><option value='13'>CDI non Cadre</option><option value='8'>CDI-Cadre</option><option value='21'>Congé Parental</option><option value='9'>Fonctionnaire (Titulaire)</option><option value='16'>Gérant- PDG</option><option value='19'>Intérimaire</option><option value='26'>Invalidité</option><option value='2'>Profession libérale</option><option value='4'>Retraité(e)</option><option value='25'>Sans Activité-Chomeur</option> 
          </select>
 
                        </div>
                    </div>
 
 
                    <div class="col-md-4 col-sm-4">
                        <div class="form-group">
                            <div class="libelle">Situation de Famille*</div> <select name="situation_de_famille_particulier" required>
              <option value='0'>- </option><option value='1'>Célibataire</option><option value='2'>Concubinage</option><option value='3'>Divorce</option><option value='7'>Divorce et union libre</option><option value='4'>Marie(e)</option><option value='9'>Pacsé</option><option value='8'>Séparé(e), instance de divorce</option><option value='5'>Vnion libre</option><option value='6'>Veuf(ve)</option>  </select>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-4">
                        <div class="form-group">
                            <div class="libelle">Type d'hébergement*</div> <select name="hebergement_particulier" required>
<option value='0'>- </option> 
                  <option value='0'>-</option>
                              <option value='4'>Hebergement de fonction </option>
                             <option value='3'>Hebergement familial </option>
                             <option value='5'>Hebergement par l'employeur </option>
                             <option value='1'>Locataire </option>
                             <option value='6'>Locataire et proprietaire </option>
                              <option value='2'>Proprietaire </option>          
                  <option value='7'>Sans effet </option>          </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3 col-sm-3">
                        <div class="form-group">
                            <center>
                                <div class="libelle"> Revenu mensuel total du ménage*</div>
                            </center> <input type="text" name="revenu_total_menage" required></div>
                    </div>
                    <div class="col-md-3 col-sm-3">
                        <div class="form-group">
                            <center>
                                <div class="libelle">Valeur de votre bien immobilier*</div>
                            </center>
                            <input type="text" name="valeur_bien_immobilier" required>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-3">
                        <div class="form-group">
                            <center>
                                <div class="libelle">Capital restant dû de votre pret* </div>
                            </center> <input type="text" name="krd_immo" required>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-3">
                        <div class="form-group">
                            <center>
                                <div class="libelle"> Montant des dettes et des crédits*</div>
                            </center> <input type="text" name="krd_total" required>
                        </div>
                    </div>
                </div>
 
                <center>
                    <div>
                        <p>Résumé de votre demande<br /><textarea name="resume_demande" rows="4" cols="50"></textarea> </p>
                    </div>
                </center>
 
                <center>
                    <div>
                        <input type="button" onclick="contact.submit()" name="submit" id="submit" value="envoyer" class="fusion-button button-flat button-round button-default button-1 button-large" />
                    </div>
                </center>
            </div>
        </div>
    </div>
</form>
 
 
<script src="https://jqueryvalidation.org/files/dist/jquery.validate.js"></script>
 
<script>
  jQuery("#contact").validate({
        submitHandler: function() {
           jQuery("#contact").submit(function() {
 
               jQuery.ajax({
                    type: 'POST',
                    url: 'demande1.php',
                    data:jQuery("#contact").serialize(),
                    dataType: 'json'
                })
 
                .done(function(data) {
 
                    alert(JSON.stringify("Votre Numero de dossier:" + data["dossier"]) + ", " +JSON.stringify(data["response"]));
                    window.location = 'https://remere1.nessiafly.com'
 
                })
 
                .fail(function(data) {
 
 
                    // just in case posting your form failed
                    alert(JSON.stringify(data['response']));
 
                });
            });
        },
 
        rules: {
            email: {
                required: true,
                email: true
            },
            telephone: {
                required: true,
                number: true
            },
            code_postal: {
                required: true,
                number: true
            }
        }
 
    });
 
    jQuery.extend(jQuery.validator.messages, {
        required: "Ce Champ est requis.",
        remote: "Veuillez verifier ce champ.",
        email: "Veuillez mettre une adresse email valide.",
        url: "Please enter a valid URL.",
        date: "Please enter a valid date.",
        dateISO: "Please enter a valid date ( ISO ).",
        number: "S'il vous plait, entrez un nombre valide.",
        digits: "Merci de n'entrer que des chiffres.",
        equalTo: "Entrez à nouveau la même valeur s'il vous plait.",
        maxlength:jQuery.validator.format("Please enter no more than {0} characters."),
        minlength:jQuery.validator.format("S'il vous plaît entrer au moins {0} caractères."),
        rangelength:jQuery.validator.format("Please enter a value between {0} and {1} characters long."),
        range:jQuery.validator.format("Please enter a value between {0} and {1}."),
        max:jQuery.validator.format("Please enter a value less than or equal to {0}."),
        min:jQuery.validator.format("S'il vous plaît entrer une valeur supérieure ou égale à {0}."),
        step:jQuery.validator.format("Please enter a multiple of {0}.")
 
      });
</script>
 
</html>
Merci de votre aide