jQuery-验证错误标签模板

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之后。

无论如何，您会将各种jQuery DOM遍历方法(如.parents()、.closest()、.siblings()、.next()等)应用于element对象，以将<label>元素(error对象)精确地注入到所需的结构中。

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