Вставка элемента в шаблон ошибки jQuery Validation

Question

Я использую jQuery Validation plugin для моей формы. Он позволяет вам изменить значение errorElement и обернуть элемент errorElement с помощью обертки . Но я хочу, чтобы вставить элемент в errorElement так:

<label class="error"><em></em>Error message goes here</label>

Есть простой способ сделать вставки эм тег?

0 Я пытаюсь добавить эммм em с помощью опции errorPlacement (см. Ниже), но, похоже, плагин заменяет содержимое errorElement впоследствии.

$.validator.setDefaults({ 
    errorPlacement: function(error, element) { 
     error.prepend('<em/>'); 
     error.insertBefore(element); 
    } 
});

Я также попытался предваряя ЕМ метку, используя опцию showErrors (см. Ниже) Опять же, похоже, что плагин заменяет содержимое errorElement впоследствии.

$.validator.setDefaults({ 
    showErrors: function(errorMap, errorList) { 
     for (var i = 0; i < errorList.length; i++) { 
      var error = errorList[i], 
       $label = this.errorsFor(error.element), 
       $element = $(error.element); 

      if ($label.length && $label.find('em').length == 0) { 
       $label.prepend('<em/>'); 
      } 
     } 

     this.defaultShowErrors(); 
    } 
});

Я также попытался модифицировать плагин, так что, когда генерируется элемент ошибки, < эм > тег предваряется. Это работает, пока я не сосредоточусь на элементе формы, который имеет ошибку, после чего удаляется тег em. (Это делает это, потому что проверка JQuery постоянно обновляет содержимое элемента ошибки, как я остановлюсь и/или введите в поле, поэтому удаление моего эм тега добавляется при создании ошибок элемента.)

Answer 1

Вы можете использовать функцию showErrors для настройки способа отображения ошибок:

$.validator.setDefaults({ 
    showErrors: function(errorMap, errorList) { 
     if (errorList.length < 1) { 
      // clear the error if validation succeeded 
      $('label.error').remove(); 
      return; 
     } 
     $.each(errorList, function(index, error) { 
      $(error.element).next('label.error').remove(); 
      $(error.element).after(
       $('<label/>') 
        .addClass('error') 
        .append($('<em/>').text('this is some em')) 
        .append(error.message) 
      ); 
     }); 
    } 
});  

Вы можете see it in action here.

Answer 2

я на самом деле решил этому путем изменения плагина, но будет принимать любое (эффективное) решение, которое не связано с его модификацией.

То, что я сделал, добавить две новые опции, appendToError и prependToError плагину. Все, что указано в этих параметрах, всегда добавляется или добавляется в элемент ошибки.

https://github.com/simshaun/jquery-validation/commit/bff7ba55d1d60ee0bac033989256a932185e7a97

(После обучения немного больше о внутренней работе плагина, я не думаю, что есть какой-либо возможный способ делать то, что я хочу, не изменяя его, не хватает реализации что-то крайне неэффективным.)

Answer 3

Я попытался решение Дарин, но столкнулись два вопроса:

• с несколькими полями, сообщения об ошибках не были корректно удалены, когда поля пошли в силе.
• я не мог использовать success обратный вызов, чтобы изменить метку ошибки на «Ok» ярлык

я закончил с помощью следующего кода, изменяющего сообщения об ошибке перед вызовом поведения по умолчанию с defaultShowErrors

$('#my_form').validate({ 
    showErrors: function(errorMap, errorList) { 
    var i, elements; 
    for(i = 0; errorList[i]; i++) { 
     errorList[i].message = "<em> " + errorList[i].message + "</em>" 
    } 
    this.defaultShowErrors()  
    } 
});