jQuery验证错误标签模板

我试图用此模板包装错误标签，但没有成功。（http://jqueryvalidation.org/）jQuery验证错误标签模板

<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，但在某些时候我的信息可能会更复杂，我认为使用模板是最好的选择。

来源

2015-10-15 Nuno Santos

'showErrors'回调选项用于创建消息摘要框，而不是用于自定义单个消息。 – Sparky

谢谢@Sparky，一些想法如何定制个人消息？ –

我试图用这个模板包装错误标签，但没有成功。

您不会将该元素包裹在模板中。您可以将此结构放入页面中，然后使用该插件将错误消息元素动态插入到其中。

你还没有说明你想要这个新结构出现在input的哪个位置，所以我不能制定出正确的DOM遍历技术。默认的label元素被放置在之后的input。

无论如何，你会运用各种jQuery的DOM遍历方法，如.parents()，.closest()，.siblings()，.next()，等来了element对象注入<label>元素（error对象）正是你想要的结构中。

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

来源

2015-10-15 17:15:15 Sparky

如果我明白你的建议使用'errorPlacement'我把错误消息放入我的模板中，然后我应该捕获'highlight'和'unhighlight'方法以显示或隐藏包含错误消息的模板？ –

@NunoSantos，是的，'highlight'和'unhighlight'方法也可以与此一起使用。当消息需要切换时，它们将自动被触发。但是，只能将* structure *放在HTML中......然后允许插件根据您的代码在'errorPlacement'回调中自动插入错误消息'label'。 – Sparky

非常感谢。 –

jQuery验证错误标签模板

回答

相关问题