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

Résolu

smoky184 Messages postés 123 Date d'inscription Statut Membre Dernière intervention -
Alain_42 Messages postés 5361 Date d'inscription Statut Membre Dernière intervention - 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.

Afficher la suite

A voir également:

Désactivation et réactivation d'un submit en Jquery
Comment reactiver un compte facebook - Guide
Comment réactiver un compte instagram - Guide
Desactivation compte zimbra - Accueil - Piratage
Comment desactiver un compte gmail - Guide
La cause de ce problème peut être la désactivation ou le refus des cookies. ✓ - Forum PHP

5 réponses

Réponse 1 / 5

Alain_42 Messages postés 5361 Date d'inscription Statut Membre Dernière intervention 894

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......

smoky184 Messages postés 123 Date d'inscription Statut Membre Dernière intervention 9

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.

smoky184 Messages postés 123 Date d'inscription Statut Membre Dernière intervention 9

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 !

Alain_42 Messages postés 5361 Date d'inscription Statut Membre Dernière intervention 894

donnes nous le code que tu as mis

Réponse 2 / 5

smoky184 Messages postés 123 Date d'inscription Statut Membre Dernière intervention 9

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.

Réponse 3 / 5

Utilisateur anonyme

Je ne comprend pas ce que tu veux. Que le boutton se désactive si seulement survient une erreur?

Réponse 4 / 5

smoky184 Messages postés 123 Date d'inscription Statut Membre Dernière intervention 9

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

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

Posez votre question

Réponse 5 / 5

Utilisateur anonyme

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.

smoky184 Messages postés 123 Date d'inscription Statut Membre Dernière intervention 9

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...

Utilisateur anonyme

Et ce pour chaque champs de texte? Pourtant là ca marche (sans jAlert):
http://jsfiddle.net/LHBw6/1/

smoky184 Messages postés 123 Date d'inscription Statut Membre Dernière intervention 9

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

Alain_42 Messages postés 5361 Date d'inscription Statut Membre Dernière intervention 894

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

Discussions similaires

comment activer les cookies

Message "Un bloqueur de publicité empêche la lecture..."

Firefox, problèmes avec les cookies

Problème cookies sur le site Canal +

comment desactiver un bloqueur de pub

Votre réponse

Discussions similaires