UI Dialog. Vérification dans une boite de dialogue [Résolu]

[albedo0]

Bonjour,

J'utilise jquery depuis peu et jquery-ui depuis encore moins longtemps et je me retrouve confronté à un problème... J'ai recupéré le code de démo du site ui-jquery, que j'ai adapté et j'ai ajouté un petite fonction.

Tout se passe bien jusqu'au moment où je souhaite valider des champs de formulaire dans une boite de dialogue.

Sur les différentes vérifications, seules les premières fonctionnent. En effet, la longueur des différents champs est correctement vérifiée, mais le reste (mots de passe identiques et regex sur champs) ne marche pas...

Quelqu'un aurait-il une idée ?

Code javascript

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
$(function() {
	$( "#dialog:ui-dialog" ).dialog( "destroy" );
 
	var name 		= $( "#name" ),
		login 		= $( "#login" ),
		email 		= $( "#email" ),
		password 	= $( "#password" ),
		password2 	= $( "#password2" ),
		allFields 	= $( [] ).add( name ).add( login ).add( email ).add( password ),
		tips 		= $( ".validateTips" );
 
	function updateTips( t ) {
		tips
			.text( t )
			.addClass( "ui-state-highlight" );
		setTimeout(function() {
			tips.removeClass( "ui-state-highlight", 1500 );
		}, 500 );
	}
 
	function checkLength( o, n, min, max ) {
		if ( o.val().length > max || o.val().length < min ) {
			o.addClass( "ui-state-error" );
			updateTips( n + " doit avoir une longueur comprise entre " +
				min + " et " + max + "." );
			return false;
		} else {
			return true;
		}
	}
 
	function checkPasswordRepeat( pass, pass2 ) {
		if ( pass.val() != pass2.val() ) {
			o.addClass( "ui-state-error" );
			updateTips( "Les deux mots de passe ne correspondent pas" );
			return false;
		} else {
			return true;
		}
	}
 
	function checkRegexp( o, regexp, n ) {
		if ( !( regexp.test( o.val() ) ) ) {
			o.addClass( "ui-state-error" );
			updateTips( n );
			return false;
		} else {
			return true;
		}
	}
 
	$( "#dialog-form" ).dialog({
		autoOpen: false,
		height: 300,
		width: 400,
		modal: true,
		buttons: {
			"Create an account": function() {
				var bValid = true;
				allFields.removeClass( "ui-state-error" );
 
				bValid = bValid && checkLength( name, "Nom", 3, 16 );
				bValid = bValid && checkLength( login, "Identifiant", 3, 16 );
				bValid = bValid && checkLength( email, "Email", 6, 80 );
				bValid = bValid && checkLength( password, "Mot de passe", 5, 16 );
				bValid = bValid && checkPasswordRepeat( "password", "password2" );
 
				bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
				// From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
				bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com" );
				bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );
 
				if ( bValid ) {
					$( "#users tbody" ).append( "<tr>" +
						"<td>" + name.val() + "</td>" + 
						"<td>" + email.val() + "</td>" + 
						"<td>" + password.val() + "</td>" +
					"</tr>" ); 
					$( this ).dialog( "close" );
				}
			},
			Cancel: function() {
				$( this ).dialog( "close" );
			}
		},
		close: function() {
			allFields.val( "" ).removeClass( "ui-state-error" );
		}
	});
 
 
 
	$( "#create-user" )
		.button()
		.click(function() {
			$( "#dialog-form" ).dialog( "open" );
		});
});

Code html

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="dialog-form" title="Ajouter un utilisateur">
	<p class="validateTips">Tous les champs sont obligatoires.</p>
	<form id="addUsr" name="addUsr">
		<fieldset>
			<label for="name">Nom</label>
			<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" /><br/>
 
			<label for="email">Email</label>
			<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" /><br/>
 
			<label for="login">Identifiant</label>
			<input type="text" name="login" id="login" class="text ui-widget-content ui-corner-all" /><br/>
 
			<label for="password">Mot de passe</label>
			<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" /><br/>
 
			<label for="password2">R&eacute;peter</label>
			<input type="password" name="password2" id="password2" value="" class="text ui-widget-content ui-corner-all" />
		</fieldset>
	</form>
</div>
 
<button id="create-user">Ajouter un utilisateur</button>

[danielhagnoul]

Bonsoir

Deux petites erreurs :

Code :

1
2
// chaque paramètre est un objet jQuery, pas un texte !
bValid = bValid && checkPasswordRepeat( password, password2 );

Code :

1
2
3
4
5
6
7
8
9
10
11
12
function checkPasswordRepeat(pass, pass2 ) {
	if ( pass.val() != pass2.val() ) {
 
		// o n'est pas défini ! Ici il est équivalent à pass.
		pass.addClass( "ui-state-error" );
 
		updateTips( "Les deux mots de passe ne correspondent pas" );
		return false;
	} else {
		return true;
	}
}

[albedo0]

La première erreur est un oubli de ma part, après mes multiples essais... mais c'est sûr que j'aurai du mal à faire marcher le tout sans cette correction !!

Sinon c'était bien le second point qui clochait !!! Merci beaucoup !c

Ça va nettement mieux, mais il me reste la vérification des expressions régulières qui ne fonctionne pas, je vais fouiller encore un peu...