Script JS de validation sur 2 formulaires
Bonjour à tous,
Je me permets de faire appel à vos lumières car je me trouve face à une difficulté, que mes faibles connaissances en JavaScript ne m'ont pas permis de résoudre après plusieurs tests infructueux.
Voici le cas. J'ai une page en HTML au sein de laquelle j'ai prévu d'intégrer deux formulaires (de même type) avec un envoi des contenus via un fichier PHP. La validation des champs du formulaire se fait à l'aide dun fichier javascript et l'affachage de l'envoi (ou d'un non-envoi suite à la détection d'une erreur) se fait dynamiquement en ajax au sein de la page.
Voici ci-dessous le code des 2 formulaires.
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
| <form id="contact-form" class="checkform" action="#" target="contact-send.php" method="post" >
<div class="form-row clearfix">
<label for="name" class="req">Votre nom *</label>
<div class="form-value"><input type="text" name="name" class="name" id="name" value="" /></div>
</div>
<div class="form-row clearfix">
<label for="email" class="req">Votre adresse email *</label>
<div class="form-value"><input type="text" name="email" class="email" id="email" value="" /></div>
</div>
<div class="form-row clearfix textbox">
<label for="message" class="req">Votre message *</label>
<div class="form-value"><textarea name="message" class="message" id="message" rows="15" cols="50"></textarea></div>
</div>
<div id="form-note">
<div class="alert alert-error">
<h6><strong>Erreur</strong>: assurez-vous d'avoir bien renseigné les différents champs !</h6>
</div>
</div>
<div class="form-row form-submit">
<input type="submit" name="submit_form" class="submit" value="Envoyer" />
</div>
<input type="hidden" name="subject" value="Contact depuis le site *****" />
<input type="hidden" name="fields" value="name,email,message," />
<input type="hidden" name="sendto" value="hello@*****.fr" />
</form>
<form id="contact-form" class="checkform"" action="#" target="contact-send.php" method="post" >
<div class="form-row clearfix">
<label for="name" class="req">Votre site</label>
<div class="form-value"><input type="text" name="name" class="name" id="name" value="" /></div>
</div>
<div class="form-row clearfix">
<label for="email" class="req">Votre adresse email *</label>
<div class="form-value"><input type="text" name="email" class="email" id="email" value="" /></div>
</div>
<div id="form-note">
<div class="alert alert-error">
<h6><strong>Erreur</strong>: assurez-vous d'avoir bien renseigné les différents champs !</h6>
</div>
</div>
<div class="form-row form-submit">
<input type="submit" name="submit_form1" class="submit" value="Demander un audit" />
</div>
<input type="hidden" name="subject" value="Contact depuis le site *****" />
<input type="hidden" name="fields" value="name,email,message," />
<input type="hidden" name="sendto" value="hello@*****.fr" />
</form> |
Et le script JavaScript de validation du 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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
| /*-----------------------------------------------------------------------------------
Script - Form Validation and Ajax Comments
-----------------------------------------------------------------------------------*/
jQuery(window).load(function($) {
/*----------------------------------------------
F O R M V A L I D A T I O N
------------------------------------------------*/
jQuery("body").on("click", 'input[type="submit"]', function() {
$form = jQuery(this).parents('form');
form_action = $form.attr('target');
form_class = $form.attr('class');
id = $form.attr('id');
if (form_class == 'checkform') {
var control = true;
$form.find('label.req').each(function(index){
var name = jQuery(this).attr('for');
defaultvalue = jQuery(this).html();
value = $form.find('.'+name).val();
formtype = $form.find('.'+name).attr('type');
if (formtype == 'radio' || formtype == 'checkbox') {
if (jQuery('.'+name+':checked').length == 0) { jQuery(this).siblings('div').find('.checkfalse').fadeIn(200); control = false; }
else { jQuery(this).siblings('div').find('.checkfalse').fadeOut(200); }
} else if(name == 'email') {
var re = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/;
if (!value.match(re)) {
$form.find('.'+name).addClass('false'); control = false;
} else {
$form.find('.'+name).removeClass('false');
}
} else {
if ( value == '' || value == defaultvalue){
$form.find('.'+name).addClass('false'); control = false;
} else {
$form.find('.'+name).removeClass('false');
}
}
});
if (!control) {
jQuery("#form-note").fadeIn(200);
return false;
} else {
jQuery("#form-note").fadeOut(200);
if (form_action && form_action !== '') {
var str = $form.serialize();
jQuery.ajax({
type: "POST",
url: form_action,
data: str,
success: function(msg){
jQuery("#form-note").html(msg);
jQuery("#form-note").delay(200).fadeIn(200);
}
});
return false;
} else {
return true;
}
} // END else {
}
});
}); // END jQuery(window).load(function($) { |
En l'état, quand je clique sur le bouton "submit" du premier formulaire, le javascript fonctionne. En cas d'erreur dans les champs du formulaire, un message s'affiche dynamiquement (ajax) juste sous le bouton "submit". Et sans erreur, j'ai un message d'envoi qui s'affiche parfaitement, au même endroit.
Or, quand je lance le second formulaire et que je renseigne les différents champs (de façon correcte ou non), le message ne s'affiche pas, comme il le devrait, sous le bouton "submit" de ce deuxième formulaire mais sous le bouton "submit" du premier formulaire.
Je présume qu'il y a un souci dans le code du JavaScript mais mes piètres connaissances en JS ne me permettent pas de le résoudre.
Si je n'ai pas été clair, je vous prie de me le dire et je tâcherai d'être plus explicite !
Et si vous avez une idée de la manière de solutionner mon problème, j'en serais ravi.
Merci d'avance et excellente fin de semaine à tous,
Christophe
PS : mon sujet touche à différentes thématiques (JS, PHP, Mail, Jquerry). J'espère que le sujet est bien à sa place dans le forum.
