проверки JQuery не используя errorPlacement HTML

Question

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

$('form').validate({ 
    errorElementClass: 'input-validation-error', 
    errorClass: 'field-validation-error', 
    errorPlacement: function (error, element) { 
     error.html('<i class="icon-warning"></i> ' + error.text()).insertAfter(element); 
    } 
}); 

Какой должна быть вставляя мои пользовательские сообщения об ошибке HTML после каждого элемента этой ошибки на моей странице. Однако я считаю, что плагин не нравится, и вместо этого переопределяет все, что я хочу помещать внутри HTML, только с сообщением об ошибке и удаляет <i class="icon-warning"></i>

Как я могу остановить это?

Answer 1

По умолчанию плагин вставляет элемент <label> в соответствии с the errorElement option, содержащий сообщение об ошибке, а затем при необходимости переключает этот элемент <label>. Если бы ваш код работал, он переместил бы этот errorElement, и плагин больше не сможет находить и переключать сообщения.

«Как я могу остановить это?»

Вы не можете. Разработчик не предоставляет прямой вариант или способ добавления любой разметки в обычный текст, который содержится в элементе сообщения проверки.

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

---

ONE: Вы можете установить пользовательские сообщения, содержащие <i> уже закрепленному.

$('form').validate({ 
    errorElementClass: 'input-validation-error', 
    errorClass: 'field-validation-error', 
    rules: { 
     foo: { 
      required: true 
     }, 
     bar: { 
      required: true 
     } 
    }, 
    messages: { 
     foo: { 
      required: "<i class='icon-warning'></i> This field is required" 
     }, 
     bar: { 
      required: "<i class='icon-warning'></i> This field is required" 
     } 
    }, 
    .... 

Это решение очень утомительно, если ваша форма содержит много полей и правил.

проверка концепции DEMO 1: jsfiddle.net/g4zq7p8j/

You could also use jQuery .extend() to change all the default messages at once

---

TWO: Иначе вручную поместить <i> элементы в разметке и установить их в качестве display: none в вашей CSS.

<input type="text" name="foo" /><i class="icon-warning"></i> 

Затем вы можете использовать highlight и unhighlight параметров обратного вызова для переключения этих <i> элементов наряду с соответствующими сообщениями об ошибках.

$('form').validate({ 
    errorElementClass: 'input-validation-error', 
    errorClass: 'field-validation-error', 
    errorPlacement: function(error, element) { 
     error.insertAfter($(element).next('i')); 
    }, 
    highlight: function(element, errorClass, validClass) { 
     .... // default highlight code here 
     $(element).next('i').show(); 
    }, 
    unhighlight: function(element, errorClass, validClass) { 
     .... // default unhighlight code here 
     $(element).next('i').hide(); 
    }, 
    .... 

проверка концепции DEMO 2: jsfiddle.net/kxmw9do2/

You could also easily have jQuery insert these elements dynamically on page load

$(document).ready(function() { 

    $('<i class="icon-warning"></i>').insertAfter('[type="text"]'); 

    ....