Jquery validator et UI Dialog

**devlm** · 17/10/2012, 15h36

bonjour,

je cherche à valider mon formulaire avec Validator et je souhaiterais qu'après vérification des éléments obligatoire et affichage des erreurs se lance une boite de dialog permettant de soumettre le formulaire (Oui inscrit un paramètre supplémentaire, Non = valide simplement le formulaire).

Voici mon code

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
60
61
62
63
64
65
66
67
68
69
 
<script>
$(document).ready(function () {  
//Validation du formulaire avec validate et dialog							
	 var validator = $("#form1").validate({
            rules: {
				suivi_par: { suivi_par0 : true },
                nom_contact: { required: true }
            },
			messages: {
                nom_contact: { required: "Veuillez saisir le nom d'un client" }
            },
            errorPlacement: function (error, element) {
                error.appendTo($("#dialog-error"));
            },
			invalidHandler: function() {
			  $("#dialog-error").dialog('open');
			},
            errorPartainer: "#dialog-error",
            errorLabelPartainer: "#dialog-error",
            wrapper: 'div',
            onfocusout: false,
            onclick: false,
			// specifying a submitHandler prevents the default submit
			submitHandler: function() {
				$("#dialog-confirm").dialog("open");
			}			
        });	
 
        $("#dialog-error").dialog({
           	autoOpen: false,
			width: 350,
			modal: true,
			overlay: { backgroundColor: "#000", opacity: 0.5 },			
            title: 'Message d\'erreur',
            resizable: false,
			open: function(event, ui) { //Cacher la croix fermer
			  $(this).closest('.ui-dialog').find('.ui-dialog-titlebar-close').hide();
			},
			buttons: {
				Ok: function() {
					$( this ).dialog( "close" );
				}
			}			
        });  		
 
 
		//formulaire de boite
		$("#dialog-confirm").dialog({
           	autoOpen: false,
			width: 350,
			modal: true,
			overlay: { backgroundColor: "#000", opacity: 0.5 },			
            title: 'Message d\'erreur',
            resizable: false,
		  buttons : {
			"Oui" : function() {
			  $("#mettre_jour_dossier").val('1'); //demande mise a jour dossier
			 $('#form1').submit();
			   $(this).dialog("close");
			},
			"Non" : function() {
			  $('#form1').submit();
			  $(this).dialog("close");
			}
		  }
		});
}); 
</script>

Voici mon code HTML simplifié :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<body>
<!--Dialog erreur formulaire!-->
 <div id="dialog-error" title="Erreur"></div>   
<!--Dialog confirmer transfert appel!-->
<div id="dialog-confirm" title="Mettre à jour le dossier"><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Souhaitez-vous mettre à jour le dossier ?
</div>
 
<form name="form1" method="post" style="margin-top:0px;" id="form1" enctype="multipart/form-data">
 
</form>
</body>

La validation fonctionne, la boite de dialog s'ouvre mais mon submit en cas de OUI/NON ne fonctionne pas.

**devlm** · 18/10/2012, 10h59

Personne n'aurait une idée ?

sinon, je peux faire une ouverture de boite de dialogue et tester l'existence de ces 2 champs en PHP.

Cordialement.

**SpaceFrog** · 18/10/2012, 11h54

Validate possède une methode invalidHandler ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
invalidHandler: function() {
  $("#dialog").dialog('open');
},

**devlm** · 18/10/2012, 12h03

J'ai déjà un invalidHandler pour la boite d'erreur de dialogue.

Je cherche à afficher une boite après vérification qu'il n'y a aucune erreur et je souhaite suite à la réponse sur une question soumettre le formulaire.

**devlm** · 18/10/2012, 12h40

c'est résolu, je viens de finalement mettre le javascript suivant, je n'utilise plus validator :

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
 
//ouvre la boite de confirmation suppression
	  $(".button").click(function(e) {
		e.preventDefault();
 
		var suivi_par=$('#suivi_par').val();
		var nom_contact=$('#nom_contact').val();
 
		if(suivi_par==0)
		{
			alert("Veuillez choisir un avocat signataire");
			return false;
		}
		if(nom_contact=="")
		{
			alert("Veuillez saisir le nom d'un client");
			return false;
		}
 
		//boite dialog consulter fichier
		//formulaire de boite supp
		$("#dialog-confirm").dialog({
            title: 'Mise à jour du dossier',
		  buttons : {
			"Oui" : function() {
			  $("#mettre_jour_dossier").val('1'); //demande mise a jour dossier
			   $(this).dialog("close");
			   $("#form1").submit();
			},
			"Non" : function() {
			  $(this).dialog("close");
			   $("#form1").submit();
			}
		  }
		});
		//ouvre la boite de confirmation suppression
		$("#dialog-confirm").dialog("open");
	  });
 
 
		//formulaire de boite
		$("#dialog-confirm").dialog({
           	autoOpen: false,
			width: 350,
			modal: true,
			overlay: { backgroundColor: "#000", opacity: 0.5 }
		});

Jquery validator et UI Dialog

jQuery

Vue hybride

Discussions similaires

Partager

Partager