JQuery ErrorPlacement - PullRequest
Новая
       23

JQuery ErrorPlacement

3 голосов
/ 28 мая 2010

У меня есть следующее: 

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

Я пытаюсь вставить сообщения об ошибках в div над формой. Моя проблема, если я удалю эту строку: $ ('# errorList'). Html (""); затем он отображает сообщения об ошибках правильно в первый раз. Если я нажму кнопку «Отправить» еще раз, он добавит еще один набор сообщений в div. Если я сохраню $ ('# errorList'). Html (""); тогда я получу только одно сообщение об ошибке.

Пожалуйста, введите номер счета.

Как обновить список ошибок, чтобы он не повторялся и правильно отображал сообщения об ошибках?

спасибо заранее.

Ответы [ 4 ]

2 голосов
/ 28 мая 2010

Проверка jQuery будет контролировать состояние сообщений об ошибках для вас. То есть вам не нужно использовать: 

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

для контроля состояния вашего контейнера ошибок. В этом случае вы должны быть в порядке, чтобы использовать: 

errorContainer: '#div.error'

errorPlacement больше предназначено для того, чтобы позволить вам добавить сообщение об ошибке в очень специфический контейнер (то есть: последний TD в TR, который зарезервирован для сообщений об ошибках).

Если вы используете подобные инструменты FireBug, вы увидите, что jQuery Validation добавит сообщение об ошибке в ваш контейнер ошибок и будет контролировать его видимость в зависимости от того, соответствует ли элемент формы его правилам.

Кроме того, вам не нужно переносить сообщения об ошибках в HTML, вы можете использовать: 

wrapper: "li"
2 голосов
/ 28 мая 2010

Я думаю, что вы ищете более подходящие варианты errorContainer, errorLabelContainer и wrapper , например: 

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

Теперь вы можете удалить обертку <li></li> из ваших сообщений об ошибках, это обернет их, затем поместит в <div id="#errorList"><ul></ul></div> и скроет <div>, когда ошибок нет:)

1 голос
/ 28 мая 2010

это работает: 

  $("#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);
            } 
        });
1 голос
/ 28 мая 2010

Я думаю, вам просто нужно добавить это в ваш метод проверки errorContainer: errorList errorLabelContainer: $("ol", container), wrapper: 'li',

Попробуй это и посмотри ...

...