jQuery Parsley.js - 更改错误容器
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/21702476/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Parsley.js - change error container
提问by andreas777
I want to alter the positioning of each error message. That is display the error message in the respective <div class="errorBlock"></div>
. By using the documentation's code the the error msg is displayed before the element (input) and not displayed as expected.
Any ideas?
我想改变每个错误消息的位置。即在相应的<div class="errorBlock"></div>
. 通过使用文档的代码,错误 msg 显示在元素(输入)之前,而不是按预期显示。有任何想法吗?
As per documentation:
根据文档:
errors: {
container: function (element, isRadioOrCheckbox) {
var $container = element.parent().find(".parsley-container");
if ($container.length === 0) {
$container = $("<div class='parsley-container'></div>").insertBefore(element);
}
return $container;
}
}
My html code is:
我的html代码是:
INPUT
输入
<div class="input-group date date-picker" data-date-format="dd/mm/yyyy" data-date-viewmode="years">
<input class="form-control dataScrap firstInput" type="text" parsley-notblank="true" parsley-required="true" parsley-error-message="You must input a birth date" readonly="readonly"/>
<span class="input-group-btn">
<button class="btn default" type="button"><i class="fa fa-calendar"></i></button>
</span>
<div class="errorBlock"></div>
</div>
CHECKBOX
复选框
<div class="checkbox-list">
<label class="checkbox-inline">
<input type="checkbox" parsley-group="checkboxGroup" parsley-mincheck="2"> Checkbox 1
</label>
<label class="checkbox-inline">
<input type="checkbox" parsley-group="checkboxGroup"> Checkbox 2
</label>
<div class="errorBlock"></div>
</div>
回答by Timothy Miller
You can do this by overwriting Parsley's default options. (note: I'm talking about the latest version [v2.0], which I suggest you use) You basically want to give Parsley a method that will find the .errorBlock
container based on the input field. It would look something like this:
您可以通过覆盖Parsley 的默认选项来做到这一点。(注意:我说的是最新版本 [v2.0],我建议你使用)你基本上想给 Parsley 一个方法,它会.errorBlock
根据输入字段找到容器。它看起来像这样:
var parsleyConfig = {
errorsContainer: function(pEle) {
var $err = pEle.$element.siblings('.errorBlock');
return $err;
}
}
$('#yourFormID').parsley(parsleyConfig);
而且这里有一个活生生的例子。
Note: using this method you can't use the parsley-validate
attribute that Makrand suggests. Calling .parsley
on your form does the same thing, except you can add your custom options to it. Also, you need to prefix all of your parsley attributes with data-
, because they're data attributes (as of v2.0).
注意:使用此方法您不能使用parsley-validate
Makrand 建议的属性。调用.parsley
您的表单执行相同的操作,但您可以向其中添加自定义选项。此外,您需要在所有欧芹属性前加上data-
,因为它们是数据属性(从 v2.0 开始)。
回答by Ahmad Hussain
try this:
尝试这个:
parsley-error-container=".errorBlock"
You can check this attribute in Parsley Documentation
您可以在Parsley 文档中检查此属性
回答by btburton42
Parsley API has been updated. The current method is:
Parsley API 已更新。目前的方法是:
data-parsley-errors-container="#your-div-id"
data-parsley-errors-container="#your-div-id"
See documentation here: http://parsleyjs.org/doc/index.html#psly-ui-for-field
请参阅此处的文档:http: //parsleyjs.org/doc/index.html#psly-ui-for-field
回答by Makrand
In reference to @ahmad hussain's answer you also need to put an attribute in your form:
关于@ahmad hussain 的回答,您还需要在表单中添加一个属性:
<form parsley-validate>
<form parsley-validate>