Discussion :

[andaman]

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

[andaman]

Solution trouvée pour ceux que cela intéresse:

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
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
 
$(function (){
    var tab_pool = ["ets_infos", "user_infos", "desc_ets", "desc_pics"];
    var visible = $(".tab:visible").attr('class').split(" ")[1];
    var curr_ind = $.inArray(visible, tab_pool);
    $(".submit").hide();
    $(".back").hide();
    $.validator.addMethod("only_letter", function(value, element){
        return this.optional(element) || /^[a-z-A-Z\-]+$/i.test(value);
    }, "Username must contain only letters or dashes.");
    $.validator.addMethod("only_letter_number", function(value, element) {
        return this.optional(element) || /^[a-zA-Z0-9]+$/i.test(value);
    }, "Username must contain only letters or numbers.");
    $.validator.addMethod("email_valid", function(value, element) {
        return this.optional(element) || /^[+a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i.test(value);
    }, "Username must contain only letters or numbers.");
    $.validator.addMethod("check_min", function(value, element){
        return $('#price_max').val() > $('#price_min').val()
    },"Must be greater than");
    var validator = $('#add_hotel').validate({
        ignore: 'input[type="button"],input[type="submit"]',
rules: {
//les tests de validation
}
   });
    $('.next').click(function(){
        var tab = $(".tab:visible");
        var valid = true;
        $('input,select,textarea', tab).each(function(i, v){
            valid = validator.element(v) && valid;
        });
        if(!valid){
            return;
        }
        if(curr_ind < 3){
            $(".tab:visible").hide();
            curr_ind = curr_ind + 1;
            $("." + tab_pool[curr_ind]).show();
            $(".submit").hide();
            $(".back").show();
        }
        if(curr_ind == 3){
            $(".submit").show();
            $(".next").hide();
        }
    });
    $('.back').click(function(){
        if(curr_ind > 0){
            $(".tab:visible").hide();
            curr_ind = curr_ind - 1;
            $("." + tab_pool[curr_ind]).show();
            $(".submit").hide();
            $(".next").show();
        }
        if(curr_ind == 0){
            $(".back").hide();
        }
    });
});