JQuery errorPlacement

Question

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

$("#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 (""); то я получу только одно сообщение об ошибке.

Введите номер счёта.

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

благодарит заранее.

Answer 1

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

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

Answer 2

Я думаю, что вы после этого является более подходящим errorContainer, errorLabelContainer and wrapper options, как это:

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

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

Answer 3

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

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

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

errorContainer: '#div.error' 

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

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

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

wrapper: "li" 

Answer 4

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

Try что и посмотреть ...