IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

UI Dialog. Vérification dans une boite de dialogue


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre très actif
    Profil pro
    Inscrit en
    Février 2007
    Messages
    248
    Détails du profil
    Informations personnelles :
    Localisation : France, Rhône (Rhône Alpes)

    Informations forums :
    Inscription : Février 2007
    Messages : 248
    Par défaut UI Dialog. Vérification dans une boite de dialogue
    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>

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    Bonsoir

    Deux petites erreurs :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    // chaque paramètre est un objet jQuery, pas un texte !
    bValid = bValid && checkPasswordRepeat( password, password2 );
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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;
    	}
    }

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  3. #3
    Membre très actif
    Profil pro
    Inscrit en
    Février 2007
    Messages
    248
    Détails du profil
    Informations personnelles :
    Localisation : France, Rhône (Rhône Alpes)

    Informations forums :
    Inscription : Février 2007
    Messages : 248
    Par défaut
    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...

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 1
    Dernier message: 03/06/2010, 21h58
  2. [VB]Afficher une liste dans une boite de dialogue
    Par Asdorve dans le forum VB 6 et antérieur
    Réponses: 5
    Dernier message: 05/04/2006, 11h30
  3. Caractères spéciaux dans une boite de dialogue
    Par Rafiki dans le forum Général JavaScript
    Réponses: 22
    Dernier message: 09/03/2006, 14h05
  4. [MFC] Dessin dans une boite de dialogue .
    Par Platypus dans le forum MFC
    Réponses: 8
    Dernier message: 21/07/2005, 11h21
  5. afficher dans une boite de dialogue la valeur d'une variable
    Par micknic dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 10/07/2005, 09h25

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo