jQuery-validation errorlabel template

Question

Я пытаюсь обернуть метку ошибки этим шаблоном, но безуспешно. (http://jqueryvalidation.org/)

<div class="alert alert-error"> 
    <div class="fx-alert-icon"> 
     <i class="fxicons fxicons-error"></i> 
    </div> 
    <div class="fx-alert-desc"> 
     <label id="input-error" class="has-error" for="input1"> 
      Input with error!! 
     </label> 
    </div> 
</div> 

Одним из решений является изменение errorElement, а затем в методе showErrors() изменить message, но я не чувствую себя комфортно с этим решением ...

var errMsgTmpl = '<div class="alert alert-error">' + 
       '<div class="fx-alert-icon">' + 
       ' <i class="fxicons fxicons-error"></i>' + 
       '</div>' + 
       '<div class="fx-alert-desc"><label for="{{LABEL-FOR}}">{{ERROR-MSG}}</label></div>' + 
       '</div>'; 

$.validator.setDefaults({    
    errorElement: "section", 
    showErrors: function (errorMap, errorList) { 
     var i, elements; 
     for (i = 0; errorList[i]; i++) { 
      errorList[i].message = errMsgTmpl 
      .replace(/{{ERROR-MSG}}/, errorList[i].message) 
      .replace(/{{LABEL-FOR}}/, $(errorList[i].element).attr('id')); 
     } 
     this.defaultShowErrors(); 
    } 
}); 

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

Answer 1

Я пытаюсь обернуть метку ошибки этим шаблоном, но безуспешно.

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

Вы не указали, где вы хотите, чтобы эта новая структура появилась в отношении input, поэтому я не могу разработать правильные методы обхода DOM. Элемент по умолчанию label размещен послеinput.

Несмотря на это, вы бы применять различные методы обхода DOM JQuery как .parents(), .closest(), .siblings(), .next() и т.д. к element объекта впрыснуть <label> элемент (error объект) точно в пределах нужной структуры.

$.validator.setDefaults({ 
    errorPlacement: function(error, element) { 
     error.insertAfter(element); 
    } 
});