Validation formulaire plusieurs étapes
Bonjour,
J'ai un long formulaire que j'ai décomposé en plusieurs étapes sous forme de "Tab Bootsrtap" (extrait ci-dessous avec les éléments importants).
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
| <ul style="margin-bottom: 25px">
<li><a href="#tab1" data-toggle="tab"><span class="label">1</span> Step 1</a></li>
<li><a href="#tab2" data-toggle="tab"><span class="label">2</span> Step 2</a></li>
</ul>
<form class="well" name="add_hotel" id="add_hotel" action="?section=add_hotel&lang=en" method="post" enctype="multipart/form-data">
<div class="tab-content">
<div class="tab-pane" id="tab1">
<div class="row">
<div class="span6">
<div class="control-group">
<label class="control-label"><span class="requiered">*</span>First Name:</label>
<div class="controls">
<input type="text" name="firstname" id="firstname" value="<?php if(isset($_SESSION['firstname'])){ echo ucfirst($_SESSION['firstname']);}?>" class="input-xlarge">
</div>
</div>
<div class="control-group">
<label class="control-label"><span class="requiered">*</span>Last Name:</label>
<div class="controls">
<input type="text" id="lastname" name="lastname" value="" class="input-xlarge">
</div>
</div>
<div class="control-group">
<label class="control-label"><span class="requiered">*</span>Username:</label>
<div class="controls">
<input type="text" name="username" class="input-xlarge username" autocomplete="off">
<span class="check" style="color:red;" ></span>
</div>
</div>
<div class="control-group">
<label class="control-label"><span class="requiered">*</span>Email:</label>
<div class="controls">
<input class="input-xlarge" type="email" name="email" value="">
</div>
</div>
</div>
<div class="row">
<div class="span6">
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab2">
2
</div>
<ul class="pager wizard">
<li class="previous first" style="display:none;"><a href="#">First</a></li>
<li class="previous"><a href="#">Previous</a></li>
<li class="next"><a href="#">Next</a></li>
<input type="submit" name="submit" class="next finish" style="display:none;" value="Finish"><a href="javascript:;"></a>
</ul>
</div>
</form> |
J'utilise le plugin JqueryValidate qui est bien implanté; il fonctionne sur la première partie de mon formulaire. Cependant, si j'ai une erreur et que j'appuie sur le bouton "suivant" de mon formulaire, je passe à l'étape suivante et donc il ne contrôle pas les champs entre chaque étape. J'ai cherché sur le net mais rien de bien concluant... Que dois-je faire dans mon code 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
| $(document).ready(function(){
$('#add_hotel').validate({
rules: {
firstname: {
minlength: 2,
required: true
},
email: {
required: true,
email: true
},
subject: {
minlength: 2,
required: true
},
message: {
minlength: 2,
required: true
}
},
highlight: function(element) {
$(element).closest('.control-group').removeClass('success').addClass('error');
},
success: function(element) {
element
.text('OK!').addClass('valid')
.closest('.control-group').removeClass('error').addClass('success');
}
});
}); // end document.ready |
Merci d'avance,
David
