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.

Answer 1

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

Answer 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"

Answer 3

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

Try that and see...

Answer 4

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);
            } 
        });