Désactiver submit après vérification et cliquer sur envoyer

Version imprimable

Bonjour à tous,

j'ai vraiment besoin d'aide je connais pas trop au javascript, je sais c'est facile pour d'autres mais pour moi j'ai passé la nuit sans solutions !:(

voila j'ai ce javascript qui vérifié les champs ( marche bien ) mais je veux évité que la personne clique plusieurs fois sur le bouton. donc après vérification des champs et après avoir cliqué envoyé, je veux désactivé le bouton !!! :roll:

merci d'avance pour votre aide !

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
<form    method="GET"  action="booking-step0.php"  id="form"  class="contact100-form validate-form">
								<div class="form-group">
									<div class="form-checkbox">
										<label for="roundtrip">
 
											<span></span><table> <tr><td><img src="images/volant.png" > </td><td style="text-transform: uppercase;">CHAUFFEUR VTC LOW COST Toulouse</td></tr></table>
										</label>
 
									</div>
								</div>
								<div class="row">
									<div class="col-md-6">
										<div class="form-group">
										<div class="wrap-input100 validate-input" data-validate="Adresse lieu départ est requis">
											<span class="form-label">LIEU DE DÉPART</span>
											<input class="form-control input100" name="destidepart" id="adr_dep_inp" type="text" placeholder="Indiquez un lieu">
													<span class="focus-input100"></span>
										</div>
									</div></div>
 
									<div class="col-md-6">
										<div class="form-group">
										<div class="wrap-input100 validate-input" data-validate="Adresse lieu arrivée est requis">
											<span class="form-label">LIEU DE DESTINATION</span>
											<input name="destiarrivee" class="form-control input100" id="adr_arr_inp" type="text" placeholder="Indiquez un lieu">
											<span class="focus-input100"></span>
											</div>
 
										</div>
									</div>
								</div>
								<div class="row">
									<div class="col-md-6">
										<div class="form-group">
										<div class="wrap-input100 validate-input" data-validate="La date départ est requis">
											<span class="form-label">DATE</span>
											<input class="form-control input100"  name="date" id="date" type="date" placeholder="jj/mm/aaaa" >
											<span class="focus-input100"></span>
										</div>
									</div>
									</div>
									<div class="col-md-6">
										<div class="form-group">
											<div class="wrap-input100 validate-input" data-validate="L'heure départ est requis">
											<span class="form-label">HEURE</span>
											<input class="form-control input100" type="time" name="time" id="time"  placeholder="--:--" >
												<span class="focus-input100"></span>
										</div>
									</div>
								</div>
							</div>	
 
 
								<div class="form-btn">
								<input type="submit" name="calculer"  id="calculer"  class="submit-btn" style="cursor:pointer;" value="Calculer le prix">							
						</div>
 
			</form>

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
 
(function ($) {
    "use strict";
 
    /*==================================================================
    [ Focus Contact2 ]*/
    $('.input100').each(function(){
        $(this).on('blur', function(){
            if($(this).val().trim() != "") {
                $(this).addClass('has-val');
            }
            else {
                $(this).removeClass('has-val');
            }
        })    
    })
 
    /*==================================================================
    [ Validate after type ]*/
    $('.validate-input .input100').each(function(){
        $(this).on('blur', function(){
            if(validate(this) == false){
                showValidate(this);
            }
            else {
                $(this).parent().addClass('true-validate');
            }
        })    
    })
 
    /*==================================================================
    [ Validate ]*/
    var input = $('.validate-input .input100');
 
    $('.validate-form').on('submit',function(){
        var check = true;
 
        for(var i=0; i<input.length; i++) {
            if(validate(input[i]) == false){
                showValidate(input[i]);
                check=false;
            }
        }
 
        return check;
    });
 
    $('.validate-form .input100').each(function(){
        $(this).focus(function(){
           hideValidate(this);
           $(this).parent().removeClass('true-validate');
        });
    });
 
    function validate (input) {
 
        if($(input).attr('type') == 'email' || $(input).attr('name') == 'email') {
            if($(input).val().trim().match(/^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{1,5}|[0-9]{1,3})(\]?)$/) == null) {
                return false;
            }
        }
	 if($(input).attr('type') == 'text' || $(input).attr('name') == 'date') {
            if($(input).val() =='') {
				 $("#bloc").css("display", "block");
                return false;
            }
        }
 
 if($(input).attr('type') == 'phone' || $(input).attr('name') == 'phone') {
            if($(input).val().trim().match(/^0[1-9]\d{8}$/) == null) {
                return false;
            }
        }
 
        else {
            if($(input).val().trim() == ''){
                return false;
            }
        }
 
    }
 
    function showValidate(input) {
        var thisAlert = $(input).parent();
 
        $(thisAlert).addClass('alert-validate');			
    }
 
    function hideValidate(input) {
        var thisAlert = $(input).parent();
 
        $(thisAlert).removeClass('alert-validate');			
    }
 
})(jQuery);

28/03/2021, 16h19
Toufik83
Bonjour,

Le problème est que la page est rechargée après chaque clic sur le bouton submit.

Sinon pour désactiver le bouton tu peux utiliser prop :
Code:

1 2 $("#calculer").prop('disabled',true);

Merci pour ta réponse mais le bouton marche toujours "jai mis le code a la fin comme ci-dessous ! :oops:

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
 
(function ($) {
    "use strict";
    /*==================================================================
    [ Focus Contact2 ]*/
    $('.input100').each(function(){
        $(this).on('blur', function(){
            if($(this).val().trim() != "") {
                $(this).addClass('has-val');
            }
            else {
                $(this).removeClass('has-val');
            }
        })    
    })
    /*==================================================================
    [ Validate after type ]*/
    $('.validate-input .input100').each(function(){
        $(this).on('blur', function(){
            if(validate(this) == false){
                showValidate(this);
            }
            else {
                $(this).parent().addClass('true-validate');
            }
        })    
    })
    /*==================================================================
    [ Validate ]*/
    var input = $('.validate-input .input100');
 
    $('.validate-form').on('submit',function(){
        var check = true;
 
        for(var i=0; i<input.length; i++) {
            if(validate(input[i]) == false){
                showValidate(input[i]);
                check=false;
            }
        }
 
        return check;
    });
 
    $('.validate-form .input100').each(function(){
        $(this).focus(function(){
           hideValidate(this);
           $(this).parent().removeClass('true-validate');
        });
    });
 
    function validate (input) {
 
        if($(input).attr('type') == 'email' || $(input).attr('name') == 'email') {
            if($(input).val().trim().match(/^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{1,5}|[0-9]{1,3})(\]?)$/) == null) {
                return false;
            }
        }
 
		 if($(input).attr('type') == 'text' || $(input).attr('name') == 'date') {
            if($(input).val() =='') {
				 $("#bloc").css("display", "block");
                return false;
            }
        }
 
		 if($(input).attr('type') == 'phone' || $(input).attr('name') == 'phone') {
            if($(input).val().trim().match(/^0[1-9]\d{8}$/) == null) {
                return false;
            }
        }
 
        else {
            if($(input).val().trim() == ''){
                return false;
            }
        }	
    }
    function showValidate(input) {
        var thisAlert = $(input).parent();
        $(thisAlert).addClass('alert-validate');	
    }
    function hideValidate(input) {
        var thisAlert = $(input).parent();
 
        $(thisAlert).removeClass('alert-validate');	
    }
 
	$("#calculer").prop('disabled',true);
 
})(jQuery);

Pas à cet endroit, mais plus haut (lors de la soumission) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
$('.validate-form').on('submit',function(){
        var check = true;
        for(var i=0; i<input.length; i++) {
            if(validate(input[i]) == false){
                showValidate(input[i]);
                check=false;
            }
        }
        if(check===false) $("#calculer").prop('disabled',true);
        return check;
    });

Maintenant il va falloir réactiver le bouton lorsqu'on essaies de corriger les valeurs des inputs :

Code:

1
2
3
4
 
$(".validate-input .input100").on("change",function(){
  if($("#calculer").prop('disabled'))  $("#calculer").prop('disabled',false);
});

salut,

Merci beaucoup pour ta réponse, j'ai fais ce que vous m'avez demander comme ci-dessous mais j'arrive toujours à cliqué plusieurs fois sur le bouton envoyé "RIEN A CHANGER" :?

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
 
(function ($) {
    "use strict";
    /*==================================================================
    [ Focus Contact2 ]*/
    $('.input100').each(function(){
        $(this).on('blur', function(){
            if($(this).val().trim() != "") {
                $(this).addClass('has-val');
            }
            else {
                $(this).removeClass('has-val');
            }
        })    
    })
    /*==================================================================
    [ Validate after type ]*/
    $('.validate-input .input100').each(function(){
        $(this).on('blur', function(){
            if(validate(this) == false){
                showValidate(this);
            }
            else {
                $(this).parent().addClass('true-validate');
            }
        })    
    })
 
 
    /*==================================================================[ Validate ]*/
    var input = $('.validate-input .input100');
 
 
 
/*  CHANGEMENT ICI ==================================================================*/
 
 
	$('.validate-form').on('submit',function(){
        var check = true;
        for(var i=0; i<input.length; i++) {
            if(validate(input[i]) == false){
                showValidate(input[i]);
                check=false;
            }
        }
        if(check===false) $("#calculer").prop('disabled',true);
        return check;
    });
 
 
	 $(".validate-input .input100").on("change",function(){
  if($("#calculer").prop('disabled'))  $("#calculer").prop('disabled',false);
});
 
 
/*========================================================================================*/
 
 
    $('.validate-form .input100').each(function(){
        $(this).focus(function(){
           hideValidate(this);
           $(this).parent().removeClass('true-validate');
        });
    });
 
 
 
 
 
 
 
    function validate (input) {
 
        if($(input).attr('type') == 'email' || $(input).attr('name') == 'email') {
            if($(input).val().trim().match(/^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{1,5}|[0-9]{1,3})(\]?)$/) == null) {
                return false;
            }
        }
 
		 if($(input).attr('type') == 'text' || $(input).attr('name') == 'date') {
            if($(input).val() =='') {
				 $("#bloc").css("display", "block");
                return false;
            }
        }
 
		 if($(input).attr('type') == 'phone' || $(input).attr('name') == 'phone') {
            if($(input).val().trim().match(/^0[1-9]\d{8}$/) == null) {
                return false;
            }
        }
 
        else {
            if($(input).val().trim() == ''){
                return false;
            }
        }	
    }
    function showValidate(input) {
        var thisAlert = $(input).parent();
        $(thisAlert).addClass('alert-validate');	
    }
    function hideValidate(input) {
        var thisAlert = $(input).parent();
 
        $(thisAlert).removeClass('alert-validate');	
    }
 
 
})(jQuery);

Désactiver le double clic bouton

Bonjour,

je souhaite votre aide car je n'arrive pas désactiver le bouton après la validation et l'envois du formulaire, je veux évité le double clic sur le bouton envoyé !

merci pour votre aide :P

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
<form    method="GET"  action="booking-step0.php"  id="form"  class="contact100-form validate-form">
								<div class="form-group">
									<div class="form-checkbox">
										<label for="roundtrip">
 
											<span></span><table> <tr><td><img src="images/volant.png" > </td><td style="text-transform: uppercase;">CHAUFFEUR VTC LOW COST Toulouse</td></tr></table>
										</label>
 
									</div>
								</div>
								<div class="row">
									<div class="col-md-6">
										<div class="form-group">
										<div class="wrap-input100 validate-input" data-validate="Adresse lieu départ est requis">
											<span class="form-label">LIEU DE DÉPART</span>
											<input class="form-control input100" name="destidepart" id="adr_dep_inp" type="text" placeholder="Indiquez un lieu">
													<span class="focus-input100"></span>
										</div>
									</div></div>
 
									<div class="col-md-6">
										<div class="form-group">
										<div class="wrap-input100 validate-input" data-validate="Adresse lieu arrivée est requis">
											<span class="form-label">LIEU DE DESTINATION</span>
											<input name="destiarrivee" class="form-control input100" id="adr_arr_inp" type="text" placeholder="Indiquez un lieu">
											<span class="focus-input100"></span>
											</div>
 
										</div>
									</div>
								</div>
								<div class="row">
									<div class="col-md-6">
										<div class="form-group">
										<div class="wrap-input100 validate-input" data-validate="La date départ est requis">
											<span class="form-label">DATE</span>
											<input class="form-control input100"  name="date" id="date" type="date" placeholder="jj/mm/aaaa" >
											<span class="focus-input100"></span>
										</div>
									</div>
									</div>
									<div class="col-md-6">
										<div class="form-group">
											<div class="wrap-input100 validate-input" data-validate="L'heure départ est requis">
											<span class="form-label">HEURE</span>
											<input class="form-control input100" type="time" name="time" id="time"  placeholder="--:--" >
												<span class="focus-input100"></span>
										</div>
									</div>
								</div>
							</div>	
 
 
								<div class="form-btn">
								<input type="submit" name="calculer"  id="calculer"  class="submit-btn" style="cursor:pointer;" value="Calculer le prix">							
						</div>
 
			</form>

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
(function ($) {
    "use strict";
    /*==================================================================
    [ Focus Contact2 ]*/
    $('.input100').each(function(){
        $(this).on('blur', function(){
            if($(this).val().trim() != "") {
                $(this).addClass('has-val');
            }
            else {
                $(this).removeClass('has-val');
            }
        })    
    })
    /*==================================================================
    [ Validate after type ]*/
    $('.validate-input .input100').each(function(){
        $(this).on('blur', function(){
            if(validate(this) == false){
                showValidate(this);
            }
            else {
                $(this).parent().addClass('true-validate');
            }
        })    
    })
 
 
    /*==================================================================[ Validate ]*/
    var input = $('.validate-input .input100');
 
 
 
/*  CHANGEMENT ICI ==================================================================*/
 
 
	$('.validate-form').on('submit',function(){
        var check = true;
        for(var i=0; i<input.length; i++) {
            if(validate(input[i]) == false){
                showValidate(input[i]);
                check=false;
            }
        }
        if(check===false) $("#calculer").prop('disabled',true);
        return check;
    });
 
 
	 $(".validate-input .input100").on("change",function(){
  if($("#calculer").prop('disabled'))  $("#calculer").prop('disabled',false);
});
 
 
/*========================================================================================*/
 
 
    $('.validate-form .input100').each(function(){
        $(this).focus(function(){
           hideValidate(this);
           $(this).parent().removeClass('true-validate');
        });
    });
 
 
 
 
 
 
 
    function validate (input) {
 
        if($(input).attr('type') == 'email' || $(input).attr('name') == 'email') {
            if($(input).val().trim().match(/^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{1,5}|[0-9]{1,3})(\]?)$/) == null) {
                return false;
            }
        }
 
		 if($(input).attr('type') == 'text' || $(input).attr('name') == 'date') {
            if($(input).val() =='') {
				 $("#bloc").css("display", "block");
                return false;
            }
        }
 
		 if($(input).attr('type') == 'phone' || $(input).attr('name') == 'phone') {
            if($(input).val().trim().match(/^0[1-9]\d{8}$/) == null) {
                return false;
            }
        }
 
        else {
            if($(input).val().trim() == ''){
                return false;
            }
        }	
    }
    function showValidate(input) {
        var thisAlert = $(input).parent();
        $(thisAlert).addClass('alert-validate');	
    }
    function hideValidate(input) {
        var thisAlert = $(input).parent();
 
        $(thisAlert).removeClass('alert-validate');	
    }
 
 
})(jQuery);