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