проверка Jquery - errorPlacement работает только первый раз

Question

Это мой код

http://jqueryvalidation.org/documentation/

var validator = $("#loginForm").validate({ 
    errorPlacement: function (error, element) { 
     error.html(""); 
     var img = $('<img id="dynamic">'); //Equivalent: $(document.createElement('img')) 
     img.attr('src', "../images/inputerror.png"); 
     img.appendTo(error); 
     error.insertAfter(element); 
    } 
}); 

Это создает изображение вместо 'Это поле обязательно.

Все работает хорошо .. но только в первый раз. Когда я снова проверяю его, он показывает, что это поле требуется снова.

---

первый раз

---

второй раз

Answer 1

Вы должны использовать соответствующие функции обратного вызова, чтобы получить ожидаемое поведение. Как правило, errorPlacement используется только для пользовательских макет ... как если бы вы хотели, чтобы все сообщения находились под вводом или внутри всплывающей подсказки.

Для переключения классов на ошибку или переключения изображения в этом случае вы должны использовать функции обратного вызова highlight и unhighlight. См.: http://jqueryvalidation.org/validate/

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

DOM структуру с параметрами по умолчанию:

<label class="error"><img src="inputerror.png" /></label> 

Использование опции errorElement: 'span' ...

var validator = $("#loginForm").validate({ 
    // your options and rules, 
    errorElement: 'span' 
}); 

Результирующая DOM структура:

<span class="error"><img src="inputerror.png" /></span> 

Answer 2

jQuery.extend(jQuery.validator.messages, { 
      required: "<img src='../images/inputerror.png'/>" 
    }); 

Это сделал это. Благодаря @Omar!

Answer 3

Почему не просто делать это с Функция showError вместо errorReplacement?

Взгляните на этот пример:

var validator = $("#loginForm").validate({ 
    errorClass: "error", 
    errorElement: 'span', 
    highlight: function (element, errorClass, validClass) { 
     $(element).parents("div.control-group").addClass(errorClass); 
    }, 
    unhighlight: function (element, errorClass, validClass) { 
     $(element).parents(".error").removeClass(errorClass); 
    }, 
    showErrors: function(map, list) { 
     this.defaultShowErrors();   // calls the default function 
              // after which we can add our changes 
     $('span.error').each(function(index) { 
      $(this).html(''); 
      var img = $('<img id="dynamic">'); 
      img.attr('src', "../images/inputerror.png"); 
      $(this).append(img);    
     }); 
    } 
});