Validation d'un champ date en Javascript ?
Bonjour
Je viens vers vous aujourd'hui car j'ai un problème avec le formulaire de mon site.
Ce formualire est des pus classique avec les champs nom, email...etc.
J'ai aussi 2 champs date (arrivée & départ) que j'ai rajouté au formulaire original du template acheté sur ThemeForest .
Le truc c'est que je connais rien en javascript et, que j'arrive pas à "faire valider" les 2 champs date.
Voici le code JS + HTML
Merci d'avance
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
| jQuery(document).ready(function(){
jQuery("#contacts_send").click(function(){
var name = jQuery('#name').val(),
email = jQuery('#email').val(),
phone = jQuery('#phone').val(),
message = jQuery('#message').val(),
errors = 0;
jQuery(".g-form .g-alert").css({'opacity': '0', 'display': 'none', 'height': '', 'margin': ''});
if (name === '') {
if ( ! jQuery('#name_row').hasClass('check_wrong')) {
jQuery('#name_row').addClass('check_wrong');
}
jQuery('#name_state').html('Entrez votre Nom svp!');
errors++;
} else {
if (jQuery('#name_row').hasClass('check_wrong')) {
jQuery('#name_row').removeClass('check_wrong');
}
jQuery('#name_state').html('');
}
if (email === '') {
if ( ! jQuery('#email_row').hasClass('check_wrong')) {
jQuery('#email_row').addClass('check_wrong');
}
jQuery('#email_state').html('Entre votre adresse Email!');
errors++;
} else {
if (jQuery('#email_row').hasClass('check_wrong')) {
jQuery('#email_row').removeClass('check_wrong');
}
jQuery('#email_state').html('');
}
if (phone === '') {
if ( ! jQuery('#phone_row').hasClass('check_wrong')) {
jQuery('#phone_row').addClass('check_wrong');
}
jQuery('#phone_state').html('Entrez votre téléphone!');
errors++;
} else {
if (jQuery('#phone_row').hasClass('check_wrong')) {
jQuery('#phone_row').removeClass('check_wrong');
}
jQuery('#phone_state').html('');
}
if (message === '') {
if ( ! jQuery('#message_row').hasClass('check_wrong')) {
jQuery('#message_row').addClass('check_wrong');
}
jQuery('#message_state').html('Entrez votre message!');
errors++;
} else {
if (jQuery('#message_row').hasClass('check_wrong')) {
jQuery('#message_row').removeClass('check_wrong');
}
jQuery('#message_state').html('');
}
if (errors == 0) {
jQuery.post("send_contact.php", {name: name, email: email, phone: phone, message: message}, function(data) {
if (data.success) {
jQuery('#name').val('');
jQuery('#email').val('');
jQuery('#phone').val('');
jQuery('#message').val('');
jQuery('#contact_form_success_message').css('display', 'block').animate({opacity:1}, 300);
} else {
if (data.errors.name !== '' && data.errors.name !== undefined) {
if ( ! jQuery('#name_row').hasClass('check_wrong')) {
jQuery('#name_row').addClass('check_wrong');
}
jQuery('#name_state').html(data.errors.name);
}
if (data.errors.email !== '' && data.errors.email !== undefined) {
if ( ! jQuery('#email_row').hasClass('check_wrong')) {
jQuery('#email_row').addClass('check_wrong');
}
jQuery('#email_state').html(data.errors.email);
}
if (data.errors.phone !== '' && data.errors.phone !== undefined) {
if ( ! jQuery('#phone_row').hasClass('check_wrong')) {
jQuery('#phone_row').addClass('check_wrong');
}
jQuery('#phone_state').html(data.errors.phone);
}
if (data.errors.message !== '' && data.errors.message !== undefined) {
if ( ! jQuery('#message_row').hasClass('check_wrong')) {
jQuery('#message_row').addClass('check_wrong');
}
jQuery('#message_state').html(data.errors.message);
}
if (data.errors.sending !== '' && data.errors.sending !== undefined) {
jQuery('#contact_form_error_message .g-alert-body p').html(data.errors.sending);
jQuery('#contact_form_error_message').css('display', 'block').animate({opacity:1}, 300);
}
}
}, "json");
}
return false;
});
$("#contact_form").submit(function(){
$("#contacts_send").click();
return false;
});
}); |
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
| <form class="g-form" action="contact_form.php" method="post" id="contact_form">
<div class="g-alert type_success with_close" id="contact_form_success_message" style="opacity: 0; display: none;">
<div class="g-alert-close"> ✕ </div>
<div class="g-alert-body">
<p>Le message a bien été envoyé. <b>Merci</b></p>
</div>
</div>
<div class="g-alert type_error with_close" id="contact_form_error_message" style="opacity: 0; display: none;">
<div class="g-alert-close"> ✕ </div>
<div class="g-alert-body">
<p></p>
</div>
</div>
<div class="g-form-group">
<div class="g-form-group-rows">
<div class="g-form-row" id="name_row">
<div class="g-form-row-field">
<input type="text" placeholder="Merci d'entrez votre Nom" name="name" id="name">
</div>
<div class="g-form-row-state" id="name_state"></div>
</div>
<div class="g-form-row" id="email_row">
<div class="g-form-row-field">
<input type="email" placeholder="Veuillez entrer votre Email"name="email" id="email">
</div>
<div class="g-form-row-state" id="email_state"></div>
</div>
<div class="g-form-row" id="phone_row">
<div class="g-form-row-field">
<input type="text" placeholder="Entrez votre N° de téléphone svp" name="phone" id="phone">
</div>
<div class="g-form-row-state" id="phone_state"></div>
</div>
<div class="g-form-row" id="date-arrivee_row">
<div class="g-form-row-label">
<label class="g-form-row-label-h" for="date1">Date d'arrivée *</label>
</div>
<div class="g-form-row-field">
<input type="date" name="date" id="date1">
</div>
<div class="g-form-row-state" id="date1_state"></div>
</div>
<div class="g-form-row" id="date-depart_row">
<div class="g-form-row-label">
<label class="g-form-row-label-h" for="date2">Date de départ *</label>
</div>
<div class="g-form-row-field">
<input type="date" name="date" id="date2">
</div>
<div class="g-form-row-state" id="date2_state"></div>
</div>
<div class="g-form-row" id="nb_adulte">
<div class="g-form-row-label">
<label class="g-form-row-label-h" for="date2">Nombre de Personne Adulte*</label>
</div>
<div class="g-form-row-field">
<input type="number" name="nb_adulte" id="nb_adulte">
</div>
<div class="g-form-row-state" id="nb_adulte"></div>
</div>
<div class="g-form-row" id="nb_enfant">
<div class="g-form-row-label">
<label class="g-form-row-label-h" for="nb_enfant">Nombre d'Enfants *</label>
</div>
<div class="g-form-row-field">
<input type="number" name=nb_enfant" id="nb_enfant">
</div>
<div class="g-form-row-state" id="nb_enfant"></div>
</div>
<div class="g-form-row" id="message_row">
<div class="g-form-row-label">
<label class="g-form-row-label-h" for="message">Votre Message *</label>
</div>
<div class="g-form-row-field">
<textarea name="message" id="message" cols="30" rows="10"></textarea>
</div>
<div class="g-form-row-state" id="message_state"></div>
</div>
<div class="g-form-row">
<div class="g-form-row-label"></div>
<div class="g-form-row-field">
<button class="g-btn type_primary" id="contacts_send">Envoyer le Message</button>
</div>
</div>
</div>
</div>
</form> |
