Jquery validator et UI Dialog

Version imprimable

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:

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:

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.

18/10/2012, 10h59
devlm

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.
18/10/2012, 11h54
SpaceFrog
Validate possède une methode invalidHandler ...
Code:

1 2 3 invalidHandler: function() { $("#dialog").dialog('open'); },
18/10/2012, 12h03
devlm

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.

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

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
 
//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 }
		});