Désactivation et réactivation d'un submit en Jquery

Résolu/Fermé
smoky184 Messages postés 121 Date d'inscription mardi 28 juillet 2009 Statut Membre Dernière intervention 22 janvier 2014 - 4 janv. 2014 à 13:06
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 - 22 janv. 2014 à 13:49
Bonjour à tous,

c'est encore moi pour avoir vos lumières sur un problème qui me tracasse légèrement.
J'essaye de faire un formulaire pour un feuille de comptage de caisse.
Le code javascript de calcul est lui fonctionnel (je n'ai pas trouvé de tutoriel sur les calculs Jquery).
La vérification des champs (en Jquery) ne fonctionne qu'à moitié... les champs s'entourent bien en rouge si autre chose qu'un nombre est entré mais je voulais aussi que le bouton submit se désactive si il y avait une erreur dans le formulaire.

jQuery.noConflict();

jQuery(document).ready(function($){
		
		$("#journal").blur(function(){
			if($("#journal").val() !="" && !$("#journal").val().match(/^[0-9]+(\.[0-9]+)?$/)){
				$(".error-message").eq(0).fadeIn().text("");
				$("#journal").css("border","2px solid #FF0000");
				jAlert('<center>Seuls <strong>les chiffres</strong> <em>[0-9]</em> et <strong>les points</strong> <em>[.]</em> sont acceptés !<br> Merci de corriger le total des espèces enregistrés</center>')
				$("#envoyer").prop("disabled", true);
			}
			else { 
				$(".error-message").eq(0).fadeOut();
				$("#journal").css("border","2px solid green");
				$("#envoyer").prop("disabled", false);
			}
		});
		
		$("#cheques").blur(function(){
			if($("#cheques").val() !="" && !$("#cheques").val().match(/^[0-9]+(\.[0-9]+)?$/)){
				$(".error-message").eq(1).fadeIn().text("");
				$("#cheques").css("border","2px solid #FF0000");
				jAlert('<center>Seuls <strong>les chiffres</strong> <em>[0-9]</em> et <strong>les points</strong> <em>[.]</em> sont acceptés !<br>Merci de corriger le total de vos chèques</center>');
				$("#envoyer").prop("disabled", true);
			}
			else { 
				$(".error-message").eq(1).fadeOut();
				$("#cheques").css("border","2px solid green");
				$("#envoyer").prop("disabled", false);
			}
		});
		
		$("#ancv").blur(function(){
			if($("#ancv").val() !="" && !$("#ancv").val().match(/^[0-9]+(\.[0-9]+)?$/)){
				$(".error-message").eq(2).fadeIn().text("");
				$("#ancv").css("border","2px solid #FF0000");
				jAlert('<center>Seuls <strong>les chiffres</strong> <em>[0-9]</em> et <strong>les points</strong> <em>[.]</em> sont acceptés !<br> Merci de corriger le montant des chèques vacances</center>');
				$("#envoyer").prop("disabled", true);
			}
			else { 
				$(".error-message").eq(2).fadeOut();
				$("#ancv").css("border","2px solid green");
				$("#envoyer").prop("disabled", false);
			}
		});
		
		$("#virements").blur(function(){
			if($("#virements").val() !="" && !$("#virements").val().match(/^[0-9]+(\.[0-9]+)?$/)){
				$(".error-message").eq(3).fadeIn().text("");
				$("#virements").css("border","2px solid #FF0000");
				jAlert('<center>Seuls <strong>les chiffres</strong> <em>[0-9]</em> et <strong>les points</strong> <em>[.]</em> sont acceptés !<br> Merci de corriger le montant total des virements</center>');
				$("#envoyer").prop("disabled", true);
			}
			else { 
				$(".error-message").eq(3).fadeOut();
				$("#virements").css("border","2px solid green");
				$("#envoyer").prop("disabled", false);
			}
		});
		
		$("#remboursements").blur(function(){
			if($("#remboursements").val() !="" && !$("#remboursements").val().match(/^[0-9]+(\.[0-9]+)?$/)){
				$(".error-message").eq(4).fadeIn().text("");
				$("#remboursements").css("border","2px solid #FF0000");
				jAlert('<center>Seuls <strong>les chiffres</strong> <em>[0-9]</em> et <strong>les points</strong> <em>[.]</em> sont acceptés !<br> Merci de corriger le montant des remboursements </center>');
				$("#envoyer").prop("disabled", true);
			}
			else { 
				$(".error-message").eq(4).fadeOut();
				$("#remboursements").css("border","2px solid green");
				$("#envoyer").prop("disabled", false);
			}
		});
		
		$("#distribs").blur(function(){
			if($("#distribs").val() !="" && !$("#distribs").val().match(/^[0-9]+(\.[0-9]+)?$/)){
				$(".error-message").eq(5).fadeIn().text("");
				$("#distribs").css("border","2px solid #FF0000");
				jAlert('<center>Seuls <strong>les chiffres</strong> <em>[0-9]</em> et <strong>les points</strong> <em>[.]</em> sont acceptés !<br> Merci de corriger de corriger le total des caisses distributeurs</center>');
				$("#envoyer").prop("disabled", true);
			}
			else { 
				$(".error-message").eq(5).fadeOut();
				$("#distribs").css("border","2px solid green");
				$("#envoyer").prop("disabled", false);
			}
		});
		
		$("#remise").blur(function(){
			if($("#remise").val() !="" && !$("#remise").val().match(/^[0-9]+(\.[0-9]+)?$/)){
				$(".error-message").eq(6).fadeIn().text("");
				$("#remise").css("border","2px solid #FF0000");
				jAlert('<center>Seuls <strong>les chiffres</strong> <em>[0-9]</em> et <strong>les points</strong> <em>[.]</em> sont acceptés !<br> Merci de corriger le montant des espèces distributeur remis en caisse');
				$("#envoyer").prop("disabled", true);
			}
			else { 
				$("#remise").css("border","2px solid green");
				$(".error-message").eq(6).fadeOut();
				$("#envoyer").prop("disabled", false);
			}
		});
		
		$("#nombre1").blur(function(){
			if($("#nombre1").val() !="" && !$("#nombre1").val().match(/^[0-9]+?$/)){
				$(".error-message").eq(7).fadeIn().text("");
				$("#nombre1").css("border","2px solid #FF0000");
				jAlert('<center>Seuls <strong>les nombres entiers</strong> sont acceptés <em>[0-999]</em> !<br>Merci de corriger le nombre de pièces de 1 cent</center>');
				$("#envoyer").prop("disabled", true);
			}
			else {
				$("#nombre1").css("border","2px solid green");
				$(".error-message").eq(7).fadeOut();
				$("#envoyer").prop("disabled", false);
			}
		});
		
		$("#nombre2").blur(function(){
			if($("#nombre2").val() !="" && !$("#nombre2").val().match(/^[0-9]+?$/)){
				$(".error-message").eq(8).fadeIn().text("");
				$("#nombre2").css("border","2px solid #FF0000");
				jAlert('<center>Seuls <strong>les nombres entiers</strong> sont acceptés <em>[0-999]</em> !<br>Merci de corriger le nombre de pièces de 2 cents</center>');
				$("#envoyer").prop("disabled", true);
			}
			else {
				$("#nombre2").css("border","2px solid green");
				$(".error-message").eq(8).fadeOut();
				$("#envoyer").prop("disabled", false);
			}
		});
		
		$("#nombre3").blur(function(){
			if($("#nombre3").val() !="" && !$("#nombre3").val().match(/^[0-9]+?$/)){
				$(".error-message").eq(9).fadeIn().text("");
				$("#nombre3").css("border","2px solid #FF0000");
				jAlert('<center>Seuls <strong>les nombres entiers</strong> sont acceptés <em>[0-999]</em> !<br>Merci de corriger le nombre de pièces de 5 cents</center>');
				$("#envoyer").prop("disabled", true);
			}
					else {
				$("#nombre3").css("border","2px solid green");
				$(".error-message").eq(9).fadeOut();
				$("#envoyer").prop("disabled", false);
			}
		});
		
		$("#nombre4").blur(function(){
			if($("#nombre4").val() !="" && !$("#nombre4").val().match(/^[0-9]+?$/)){
				$(".error-message").eq(10).fadeIn().text("");
				$("#nombre4").css("border","2px solid #FF0000");
				jAlert('<center>Seuls <strong>les nombres entiers</strong> sont acceptés <em>[0-999]</em> !<br>Merci de corriger le nombre de pièces de 10 cents</center>');
				$("#envoyer").prop("disabled", true);
			}
					else {
				$("#nombre4").css("border","2px solid green");
				$(".error-message").eq(10).fadeOut();
				$("#envoyer").prop("disabled", false);
			}
		});
		
		$("#nombre5").blur(function(){
			if($("#nombre5").val() !="" && !$("#nombre5").val().match(/^[0-9]+?$/)){
				$(".error-message").eq(11).fadeIn().text("");
				$("#nombre5").css("border","2px solid #FF0000");
				jAlert('<center>Seuls <strong>les nombres entiers</strong> sont acceptés <em>[0-999]</em> !<br>Merci de corriger le nombre de pièces de 20 cents</center>');
				$("#envoyer").prop("disabled", true);
			}
			else {
				$("#nombre5").css("border","2px solid green");
				$(".error-message").eq(11).fadeOut();
				$("#envoyer").prop("disabled", false);
			}
		});
		
		$("#nombre6").blur(function(){
			if($("#nombre6").val() !="" && !$("#nombre6").val().match(/^[0-9]+?$/)){
				$(".error-message").eq(12).fadeIn().text("");
				$("#nombre6").css("border","2px solid #FF0000");
				jAlert('<center>Seuls <strong>les nombres entiers</strong> sont acceptés <em>[0-999]</em> !<br>Merci de corriger le nombre de pièces de 50 cents</center>');
				$("#envoyer").prop("disabled", true);
			}
			else {
				$("#nombre6").css("border","2px solid green");
				$(".error-message").eq(12).fadeOut();
				$("#envoyer").prop("disabled", false);
			}
		});
		
		$("#nombre7").blur(function(){
			if($("#nombre7").val() !="" && !$("#nombre7").val().match(/^[0-9]+?$/)){
				$(".error-message").eq(13).fadeIn().text("");
				$("#nombre7").css("border","2px solid #FF0000");
				jAlert('<center>Seuls <strong>les nombres entiers</strong> sont acceptés <em>[0-999]</em> !<br>Merci de corriger le nombre de pièces de 1 Euro</center>');
				$("#envoyer").prop("disabled", true);
			}
			else {
				$("#nombre7").css("border","2px solid green");
				$(".error-message").eq(13).fadeOut();
				$("#envoyer").prop("disabled", false);
			}
		});
		
		$("#nombre8").blur(function(){
			if($("#nombre8").val() !="" && !$("#nombre8").val().match(/^[0-9]+?$/)){
				$(".error-message").eq(14).fadeIn().text("");
				$("#nombre8").css("border","2px solid #FF0000");
				jAlert('<center>Seuls <strong>les nombres entiers</strong> sont acceptés <em>[0-999]</em> !<br>Merci de corriger le nombre de pièces de 2 Euros</center>');
				$("#envoyer").prop("disabled", true);
			}
			else {
				$("#nombre8").css("border","2px solid green");
				$(".error-message").eq(14).fadeOut();
				$("#envoyer").prop("disabled", false);
			}
		});
		
		$("#nombre9").blur(function(){
			if($("#nombre9").val() !="" && !$("#nombre9").val().match(/^[0-9]+?$/)){
				$(".error-message").eq(15).fadeIn().text("");
				$("#nombre9").css("border","2px solid #FF0000");
				jAlert('<center>Seuls <strong>les nombres entiers</strong> sont acceptés <em>[0-999]</em> !<br>Merci de corriger le nombre de billets de 5 Euros</center>');
				$("#envoyer").prop("disabled", true);
			}
			else {
				$("#nombre9").css("border","2px solid green");
				$(".error-message").eq(15).fadeOut();
				$("#envoyer").prop("disabled", false);
			}
		});
		
		$("#nombre10").blur(function(){
			if($("#nombre10").val() !="" && !$("#nombre10").val().match(/^[0-9]+?$/)){
				$(".error-message").eq(16).fadeIn().text("");
				$("#nombre10").css("border","2px solid #FF0000");
				jAlert('<center>Seuls <strong>les nombres entiers</strong> sont acceptés <em>[0-999]</em> !<br>Merci de corriger le nombre de billets de 10 Euros</center>');
				$("#envoyer").prop("disabled", true);
			}
			else {
				$("#nombre10").css("border","2px solid green");
				$(".error-message").eq(16).fadeOut();
				$("#envoyer").prop("disabled", false);
			}
		});
		
		$("#nombre11").blur(function(){
			if($("#nombre11").val() !="" && !$("#nombre11").val().match(/^[0-9]+?$/)){
				$(".error-message").eq(17).fadeIn().text("");
				$("#nombre11").css("border","2px solid #FF0000");
				jAlert('<center>Seuls <strong>les nombres entiers</strong> sont acceptés <em>[0-999]</em> !<br>Merci de corriger le nombre de billets de 20 Euros</center>');
				$("#envoyer").prop("disabled", true);
			}
			else {
				$("#nombre11").css("border","2px solid green");
				$(".error-message").eq(17).fadeOut();
				$("#envoyer").prop("disabled", false);
			}
		});
		
		$("#nombre12").blur(function(){
			if($("#nombre12").val() !="" && !$("#nombre12").val().match(/^[0-9]+?$/)){
				$(".error-message").eq(18).fadeIn().text("");
				$("#nombre12").css("border","2px solid #FF0000");
				jAlert('<center>Seuls <strong>les nombres entiers</strong> sont acceptés <em>[0-999]</em> !<br>Merci de corriger le nombre de billets de 50 Euros</center>');
				$("#envoyer").prop("disabled", true);
			}
			else {
				$("#nombre12").css("border","2px solid green");
				$(".error-message").eq(18).fadeOut();
				$("#envoyer").prop("disabled", false);
			}
		});
		
		$("#nombre13").blur(function(){
			if($("#nombre13").val() !="" && !$("#nombre13").val().match(/^[0-9]+?$/)){
				$(".error-message").eq(19).fadeIn().text("");
				$("#nombre13").css("border","2px solid #FF0000");
				jAlert('<center>Seuls <strong>les nombres entiers</strong> sont acceptés <em>[0-999]</em> !<br>Merci de corriger le nombre de billets de 100 Euros</center>');
				$("#envoyer").prop("disabled", true);
			}
			else {
				$("#nombre13").css("border","2px solid green");
				$(".error-message").eq(19).fadeOut();
				$("#envoyer").prop("disabled", false);
			}
		});
		
		$("#nombre14").blur(function(){
			if($("#nombre14").val() !="" && !$("#nombre14").val().match(/^[0-9]+?$/)){
				$(".error-message").eq(20).fadeIn().text("");
				$("#nombre14").css("border","2px solid #FF0000");
				jAlert('<center>Seuls <strong>les nombres entiers</strong> sont acceptés <em>[0-999]</em> !<br>Merci de corriger le nombre de billets de 200 Euros</center>');
				$("#envoyer").prop("disabled", true);
			}
			else {
				$("#nombre14").css("border","2px solid green");
				$(".error-message").eq(20).fadeOut();
				$("#envoyer").prop("disabled", false);
			}
		});
		
		$("#nombre15").blur(function(){
			if($("#nombre15").val() !="" && !$("#nombre15").val().match(/^[0-9]+?$/)){
				$(".error-message").eq(21).fadeIn().text("");
				$("#nombre15").css("border","2px solid #FF0000");
				jAlert('<center>Seuls <strong>les nombres entiers</strong> sont acceptés <em>[0-999]</em> !<br>Merci de corriger le nombre de billets de 500 Euros</center>');
				$("#envoyer").prop("disabled", true);
			}
			else {
				$("#nombre15").css("border","2px solid green");
				$(".error-message").eq(21).fadeOut();
				$("#envoyer").prop("disabled", false);
			}
		});	
});


<input type="submit" id="envoyer" class="calcull" value="Imprimer >" disabled="true" />


je sais que je m'y suis mal pris puisque le bouton se désactive ou réactive à chaque blur en ne prennant en compte que le dernier champ rempli...

soyez indulgents et compréhensifs j'aimerais apprendre donc j'essaye.

merci d'avance.

5 réponses

Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
13 janv. 2014 à 23:35
une solution en mémorisant les erreurs dans un array
si array vide on active le bouton
(je n'ai pas testé )
jQuery(document).ready(function($){
	var array_erreur=new Array();
	$(".input_saisies").blur((function(){
		//tu mets class="input_saisies" à chaque input
		//cette fonction va verifier à chaque changement dans les input que l'array des erreurs est vide pour activer le bt submit
		if(array_erreur.length > 0){
			$("#envoyer").prop("disabled", true);
		}else{
			$("#envoyer").prop("disabled", false);
		}
	}
		$("#journal").blur(function(){
			if($("#journal").val() !="" && !$("#journal").val().match(/^[0-9]+(\.[0-9]+)?$/)){
				$(".error-message").eq(0).fadeIn().text("");
				$("#journal").css("border","2px solid #FF0000");
				jAlert('<center>Seuls <strong>les chiffres</strong> <em>[0-9]</em> et <strong>les points</strong> <em>[.]</em> sont acceptés !<br> Merci de corriger le total des espèces enregistrés</center>')
				array_erreur['journal']=true; //on stoque l'erreur dans l'array a l'index spécifique
			}
			else { 
				$(".error-message").eq(0).fadeOut();
				$("#journal").css("border","2px solid green");
				if(array_erreur['journal'] != 'undefined' ) delete array_erreur['journal']; //si c'est maintenant ok alors qu'il y avait une erreur à cet index on l'efface
			}
		});
		
		$("#cheques").blur(function(){
			if($("#cheques").val() !="" && !$("#cheques").val().match(/^[0-9]+(\.[0-9]+)?$/)){
				$(".error-message").eq(1).fadeIn().text("");
				$("#cheques").css("border","2px solid #FF0000");
				jAlert('<center>Seuls <strong>les chiffres</strong> <em>[0-9]</em> et <strong>les points</strong> <em>[.]</em> sont acceptés !<br>Merci de corriger le total de vos chèques</center>');
				array_erreur['cheques']=true;
			}
			else { 
				$(".error-message").eq(1).fadeOut();
				$("#cheques").css("border","2px solid green");
				if(array_erreur['cheques'] != 'undefined' ) delete array_erreur['cheques'];
			}
		});

etc......
1
smoky184 Messages postés 121 Date d'inscription mardi 28 juillet 2009 Statut Membre Dernière intervention 22 janvier 2014 9
16 janv. 2014 à 09:51
Ben je ne comprend pas trop pourquoi j'ai ce message d'erreur :
Uncaught SyntaxError: Unexpected identifier
Finalement rien ne fonctionne mais l'idée est bonne je vais me pencher la dessus.
0
smoky184 Messages postés 121 Date d'inscription mardi 28 juillet 2009 Statut Membre Dernière intervention 22 janvier 2014 9
22 janv. 2014 à 11:58
J'ai essayé mais j'ai toujours des erreurs.... J'ai bien compris le principe et j'essaye de le mettre en application. J'ai en attendant mis l'autre code pour annuler le submit mais je continue a me pencher sur ma désactivation de bouton !
0
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
22 janv. 2014 à 13:49
donnes nous le code que tu as mis
0
smoky184 Messages postés 121 Date d'inscription mardi 28 juillet 2009 Statut Membre Dernière intervention 22 janvier 2014 9
20 janv. 2014 à 09:38
Bon j'ai finalement changé de méthode. Le principe ne sera plus de désactiver le bouton mais d'annuler l'événement "submit" avec
"preventDefault();"

comme ceci :

jQuery(document).ready(function($){

	$("#form1").submit(function(event){
		
		if($("#journal").val() !="" && !$("#journal").val().match(/^[0-9]+(\.[0-9]+)?$/))
		{
			$(".error-message").eq(0).fadeIn().text("");
			$("#journal").css("border","2px solid #FF0000");
			jAlert('<center>Seuls <strong>les chiffres</strong> <em>[0-9]</em> et <strong>les points</strong> <em>[.]</em> sont acceptés !<br> Merci de corriger le total des espèces enregistrés</center>')
			event.preventDefault();
		}
		else 
		{ 
			$(".error-message").eq(0).fadeOut();
			$("#journal").css("border","2px solid green");
		}
		if($("#cheques").val() !="" && !$("#cheques").val().match(/^[0-9]+(\.[0-9]+)?$/))
		{
			$(".error-message").eq(1).fadeIn().text("");
			$("#cheques").css("border","2px solid #FF0000");
			jAlert('<center>Seuls <strong>les chiffres</strong> <em>[0-9]</em> et <strong>les points</strong> <em>[.]</em> sont acceptés !<br>Merci de corriger le total de vos chèques</center>');
			event.preventDefault();
		}
		else 
		{ 
			$(".error-message").eq(1).fadeOut();
			$("#cheques").css("border","2px solid green");
		}
     });
});


Ce code est fonctionnel pour les personnes que cela intéresse.
1
Utilisateur anonyme
12 janv. 2014 à 05:07
Je ne comprend pas ce que tu veux. Que le boutton se désactive si seulement survient une erreur?
0
smoky184 Messages postés 121 Date d'inscription mardi 28 juillet 2009 Statut Membre Dernière intervention 22 janvier 2014 9
Modifié par smoky184 le 12/01/2014 à 11:29
Bonjour Sunr

Alors simplement, j'aimerais qu'il soit impossible d'envoyer le formulaire si au moins une erreur est trouvée.
Je crois qu'il existe "each" ou "try" qui pourraient m'aider mais je ne les connais pas
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Utilisateur anonyme
12 janv. 2014 à 22:37
Eh ben, ton code fonctionne très bien si tu supprimes la ligne du jAlert.

jAlert('<center>Seuls <strong>les chiffres</strong> <em>[0-9]</em> et <strong>les points</strong> <em>[.]</em> sont acceptés !<br> Merci de corriger le total des espèces enregistrés</center>')//Ne fonctionne pas!!!


Je ne comprend pas pourquoi, mais au moins nous avons trouvé le problème. Je te reviens avec plus d'info.
0
smoky184 Messages postés 121 Date d'inscription mardi 28 juillet 2009 Statut Membre Dernière intervention 22 janvier 2014 9
Modifié par smoky184 le 13/01/2014 à 02:19
En faite cela fonctionne également avec le Jalert(). Le problème est en réalité lié au fait que si tu entre une erreur sur une ligne le bouton se désactive mais si juste après tu entre un chiffre correctement même sans corriger l'erreur précédente le bouton se réactive quand même.
J'ai sûrement une erreur avec la manière de tourner le code...
0
Utilisateur anonyme
13 janv. 2014 à 23:12
Et ce pour chaque champs de texte? Pourtant là ca marche (sans jAlert):
http://jsfiddle.net/LHBw6/1/
0
smoky184 Messages postés 121 Date d'inscription mardi 28 juillet 2009 Statut Membre Dernière intervention 22 janvier 2014 9
16 janv. 2014 à 09:49
En faite le Jalert ne fonctionne que si tu as le "plugin_Jalert" qui permet de modifier les fenêtre d'alert justement.
Si tu n'a pas le plug le Jalert foire le reste
0
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
20 janv. 2014 à 17:58
que tu utilises la méthode de désactivation du bouton ou que tu bloques le submit cela ne résoud pas le pb que tu décris
Le problème est en réalité lié au fait que si tu entre une erreur sur une ligne le bouton se désactive mais si juste après tu entre un chiffre correctement même sans corriger l'erreur précédente le bouton se réactive quand même.

il faut que tu essayes avec la méthode que je te proposait en mémorisant les erreurs dans un array
tant que l'erreur n'est pas effacée dans l'array ça interdit l'envoi
0