jQuery Steps - Multiple issues
Bonjour à tous,
J'utilise jQuery Steps et jQuery Validate pour soumettre mon formulaire, cependant, bien qu'ayant respecté la documentation, certaines erreurs surviennent sans que je ne puisse en connaître la raison.
1. Le transition effect ne fonctionne pas. Faut-il une autre librairie additionnelle ?
2. Pour revenir en arrière, je voudrais que le validate ne s'active pas. Il n'est pas utilise que les champs soient valide si c'est un retour en arrière.
3. Si quelque chose dans mon code vous semble inutile ou non fonctionnel, dites le moi svp :)
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
| var form = $("#booking-form");
form.validate({
ignore: [],
select: {
required: true
},
errorPlacement: function(error, element) {
if (element.is('select:hidden')) {
error.insertAfter(element.next('.nice-select'));
} else {
error.insertAfter(element);
}
}
});
form.steps({
headerTag: "h3",
bodyTag: "div",
transitionEffect: "slideLeft",
onStepChanging: function (event, currentIndex, newIndex)
{
form.validate().settings.ignore = ":disabled,:hidden";
return form.valid();
},
onFinishing: function (event, currentIndex)
{
form.validate().settings.ignore = ":disabled";
return form.valid();
},
onFinished: function (event, currentIndex)
{
form.submit();
}
}); |
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
| <form id="booking-form" method="post" action="php/contact.php" class="form" autocomplete="off" novalidate="novalidate">
<h3>Personal information</h3>
<div class="step">
<div class="form-group">
<input type="text" name="firstname" class="form-control required" placeholder="First Name *">
</div>
<div class="form-group">
<input type="text" name="lastname" class="form-control required" placeholder="Last Name *">
</div>
<div class="form-group">
<input type="email" name="email" class="form-control required" placeholder="Your Email *">
</div>
<div class="form-group">
<textarea rows="5" id="message" name="message" class="form-control required" placeholder="Your Message *"></textarea>
</div>
<div class="form-group">
<div class="styled-select clearfix">
<select class="wide required" name="country">
<option value="">Your Country</option>
<option value="Europe">Europe</option>
<option value="Asia">Asia</option>
<option value="North America">North America</option>
<option value="South America">South America</option>
<option value="Oceania">Oceania</option>
</select>
</div>
</div>
<div class="form-group terms">
<label class="container_check">Please accept <a href="#" data-toggle="modal" data-target="#terms-txt">Terms and conditions</a>
<input type="checkbox" name="terms" value="Yes" class="required">
<span class="checkmark"></span>
</label>
</div>
</div>
<h3>Personal information</h3>
<div class="step">
<div class="form-group">
<input type="text" name="test1" class="form-control required" placeholder="First Name *">
</div>
<div class="form-group">
<input type="text" name="test2" class="form-control required" placeholder="Last Name *">
</div>
<div class="form-group">
<input type="email" name="test3" class="form-control required" placeholder="Your Email *">
</div>
<div class="form-group">
<textarea rows="5" id="FDSF" name="test8" class="form-control required" placeholder="Your Message *"></textarea>
</div>
</div>
<!-- Leave for security protection -->
<input id="nohuman" name="nohuman" type="text" value="">
<button type="submit" class="button button-pink submit mt-3"><i class="fas fa-arrow-circle-right"></i>Continue</button>
</form> |
Merci d'avance.
