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 html : 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
<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 : 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
$(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