jquery errorPlacement

Question

J'ai les éléments suivants :

$("#pmtForm").validate({
            rules: {
                    acct_name: "required",                        
                    acct_type: "required",  
                    acct_routing:  { 
                                     required: true,    
                                     digits: true,
                                     exactLength:9
                                     }, 
                    acct_num:      { 
                                     required: true,    
                                     digits: true
                                     }, 
                    c_acct_routing:{ 
                                     equalTo: '#acct_routing'
                                     },     
                    c_acct_num:    { 
                                     equalTo: '#acct_routing'
                                     }      
            },
            messages: {
                    acct_name: "<li>Please enter an account name.</li>",
                    acct_type: "<li>Please choose an account type.</li>",
                    acct_routing: "<li>Please enter a routing number.</li>",
                    acct_num: "<li>Please enter an account number.</li>",
                    c_acct_routing: "<li>Please confirm the routing number.</li>",
                    c_acct_num: "<li>Please confirm the account number.</li>"
            },

        //  errorContainer: '#div.error',

            errorPlacement: function(error, element) {
                $('#errorList').html("");
                $('#errorList').append(error);
                $('div.error').attr("style","display:block;");  
            } 
        });

J'essaie d'insérer les messages d'erreur dans un div au-dessus du formulaire. Mon problème est que si je supprime cette ligne : $('#errorList').html("") ; les messages d'erreur s'affichent correctement la première fois. Si j'appuie sur le bouton "submit" une fois de plus, une autre série de messages sera ajoutée à la division. Si je garde $('#errorList').html("") ; alors je n'obtiendrai qu'un seul message d'erreur.

• Veuillez saisir un numéro de compte.

Comment rafraîchir la liste d'erreurs pour qu'elle ne se répète pas et affiche les messages d'erreur correctement ?

Merci d'avance.

Answer 1

Je pense que ce que vous cherchez est plus approprié. errorContainer , errorLabelContainer y wrapper options comme ceci :

$("#pmtForm").validate({
        rules: { ... },
        messages: { ... },
        errorContainer: '#errorList',
        errorLabelContainer: "#errorList ul",
        wrapper: 'li'
});

Vous pouvez maintenant retirer le <li></li> de vos messages d'erreur, ceci les enveloppera et les placera dans le fichier <div id="#errorList"><ul></ul></div> et de cacher le <div> quand il n'y a pas d'erreurs :)

Answer 2

La validation jQuery contrôlera l'état des messages d'erreur pour vous. C'est-à-dire que vous ne devriez pas avoir à utiliser :

$('#errorList').html("");

pour contrôler l'état de votre conteneur d'erreurs. Dans ce cas, vous devriez pouvoir utiliser :

errorContainer: '#div.error'

errorPlacement est plutôt destiné à vous permettre d'ajouter le message d'erreur à un conteneur très spécifique (par exemple, le dernier TD d'un TR réservé aux messages d'erreur).

Si vous utilisez des outils similaires à FireBug, vous verrez que jQuery Validation ajoutera le message d'erreur à votre conteneur d'erreurs et contrôlera sa visibilité selon que l'élément d'un formulaire satisfait ou non à ses règles.

De plus, vous ne devriez pas avoir besoin d'envelopper vos messages d'erreur dans du HTML, vous pouvez utiliser :

wrapper: "li"

Answer 3

Je pense que vous devez simplement ajouter ceci à votre méthode de validation errorContainer: errorList errorLabelContainer: $("ol", container), wrapper: 'li',

Essayez cela et voyez...

Answer 4

Ça marche :

  $("#addPmtAcctForm").validate({
            rules: {
                    acct_name: "required",                        
                    acct_type: "required",  
                    acct_routing:  { 
                                     required: true,    
                                     digits: true,
                                     exactLength:9
                                     }, 
                    acct_num:      { 
                                     required: true,    
                                     digits: true
                                     }, 
                    c_acct_routing:{ 
                                     equalTo: '#acct_routing'
                                     },     
                    c_acct_num:    { 
                                     equalTo: '#acct_num'
                                     }      
            },
            messages: {
                    acct_name: "<li>Please enter an account name.</li>",
                    acct_type: "<li>Please choose an account type.</li>",
                    acct_routing: "<li>Please enter a routing number.</li>",
                    acct_num: "<li>Please enter an account number.</li>",
                    c_acct_routing: "<li>Please confirm the routing number.</li>",
                    c_acct_num: "<li>Please confirm the account number.</li>"
            },

            errorLabelContainer: $("ul", $('div.error')), wrapper: 'li',

            errorContainer: $('div.error'),

            errorPlacement: function(error, element) {
                $('#errorList').append(error);
            } 
        });