jquery errorPlacement

Question

I have the following:

$("#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;");  
            } 
        });

I am trying to insert the error messages to a div above the form. My problem is if I remove this line : $('#errorList').html(""); then it displays the error messages correctly the first time. If i hit the submit one more time, it will append another set of messages to the div. If I keep $('#errorList').html(""); then I will get only one error message.

Please enter an account number.

How do I refresh the errorList so it doesn't repeat itself and displays the error messages correctly?

thanks in advance.

Your question just helped me to find a problem, thank you :-) — Philipp
– Philipp, Commented Apr 21, 2012 at 19:58

Nick Craver · Accepted Answer · 2010-05-28 17:43:42Z

2

I think what you're after is the more appropriate errorContainer, errorLabelContainer and wrapper options, like this:

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

You can now remove the <li></li> wrapping from your error messages, this will wrap them, place then in the <div id="#errorList"><ul></ul></div>, and hide the <div> when there are no errors :)

answered May 28, 2010 at 17:43

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

JMP · Accepted Answer · 2010-05-28 17:43:54Z

2

jQuery validation will control the state of the error messages for you. That is, you shouldn't have to use:

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

to control the state of your error container. In this case, you should be OK to use:

errorContainer: '#div.error'

errorPlacement is more intended to allow you to append the error message to a very specific container (ie: the last TD in a TR that is reserved for error messages).

If you use FireBug similar tools, you'll see that jQuery Validation will append the error message to your error container and control its visibility based on whether a form's element passes its rules.

Also, you shouldn't need to wrap your error messages in HTML, you can use:

wrapper: "li"

answered May 28, 2010 at 17:43

JMP

7,8847 gold badges35 silver badges34 bronze badges

Comments

Teja Kantamneni · Accepted Answer · 2010-05-28 17:44:33Z

1

I think you just need to add this to your validate method errorContainer: errorList errorLabelContainer: $("ol", container), wrapper: 'li',

Try that and see...

answered May 28, 2010 at 17:44

Teja Kantamneni

17.5k12 gold badges58 silver badges86 bronze badges

3 Comments

Kung Fu Ninja Over a year ago

almost there. the link was very helpful. Now, I have: errorLabelContainer: $("ul", $('div.error')), wrapper: 'li', errorContainer: $('div.error'), errorPlacement: function(error, element) { $('#errorList').append(error); } My new problem is even the c_acct_num = acct_num, the last error message won't go away.

Teja Kantamneni Over a year ago

Why do you need errorPlacement after having the error container?

Kung Fu Ninja Over a year ago

oopsie, it's supposed to be : c_acct_num: { equalTo: '#acct_num' }

Kung Fu Ninja · Accepted Answer · 2010-05-28 17:56:37Z

this works:

  $("#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);
            } 
        });

Collectives™ on Stack Overflow

jquery errorPlacement

4 Answers 4

Comments

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related