javascript 更改 parsleyjs 中 parsley-errors-list 的位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30122028/
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
Change the position of parsley-errors-list in parsleyjs
提问by Leo
I am using parsleyjs.orgto validate my forms.
我正在使用parsleyjs.org来验证我的表单。
The plugin creates a ui.parsley-errors-listwhen an input has a validation error.
ui.parsley-errors-list当输入有验证错误时，插件会创建一个。
The problem is that the .parsley-errors-listis being placed just after the form element's "input, textarea, radio etc.." breaking my layout as follows:
问题是它.parsley-errors-list被放置在表单元素的“输入、文本区域、收音机等”之后，打破了我的布局，如下所示：
<fieldset>
<p>Checkboxs with a max</p>
<label class="checkbox parsley-error">
<input name="checkbox2" type="checkbox" required="" data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" data-parsley-id="5492"> <span></span>
<p>Normal</p>
</label>
<ul class="parsley-errors-list filled" id="parsley-id-multiple-checkbox2">
<li class="parsley-required">This value is required.</li>
</ul>
<label class="checkbox">
<input name="checkbox2" type="checkbox" data-parsley-multiple="checkbox2" data-parsley-id="5492"> <span></span>
<p>Normal</p>
</label>
<label class="checkbox">
<input name="checkbox2" type="checkbox" data-parsley-multiple="checkbox2" data-parsley-id="5492"> <span></span>
<p>Normal</p>
</label>
</fieldset>
Instead, the .parsley-errors-listneed to be positioned to be the last child/element within the container <fieldset>.
相反，.parsley-errors-list需要定位为容器内的最后一个子元素/元素<fieldset>。
Is this achievable?
这是可以实现的吗？
回答by Luís Cruz
You can set the error container with (at least) two ways.
您可以使用（至少）两种方式设置错误容器。
Change the container with DOM attributes
In cases where you only have one input (or group of inputs, like you do) and you want to change the container of the errors on those inputs, you can use
data-parsley-errors-container="#element"(see the docs). Here is an example (jsfiddle demo)<fieldset> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" required data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" value="option1" data-parsley-errors-container="#checkbox-errors" /> 1 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox2" data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" value="option2" /> 2 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox3" data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" value="option3" /> 3 </label> <div id="checkbox-errors"></div> </fieldset>Note the attribute
data-parsley-errors-container="#checkbox-errors"on the first checkbox and the element<div id="checkbox-errors"></div>at the end of the fieldset.In this case you don't need to add the
data-parsley-errors-containerto all checkboxes because you're "grouping" them withdata-parsley-multiple="checkbox2".Set a custom configuration to be used by Parsley
In cases where you have a few or all inputs and you want to change the position of the default container. Lets say all your fields are placed inside a fieldset and you want to display the errors at the end of the fieldset.
This solution allows you to change the default container for each field (jsfiddle demo)
<fieldset> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" required data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" value="option1" /> 1 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox2" data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" value="option2" /> 2 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox3" data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" value="option3" /> 3 </label> <div id="checkbox-errors"></div> </fieldset> <script> $(document).ready(function() { var parsleyConfig = { errorsContainer: function(parsleyField) { var fieldSet = parsleyField.$element.closest('fieldset'); if (fieldSet.length > 0) { return fieldSet.find('#checkbox-errors'); } return parsleyField; } }; $("form").parsley(parsleyConfig); }); </script>In this solution we've added the element
<div id="checkbox-errors"></div>before the end of the fieldset and changed theerrorsContaineroption of Parsley. If our element is inside a fieldset the errors will be displayed inside the#checkbox-errors.Based on this example, you are also able to set the same container for all fields. In this case your options would be something like this (jsfiddle demo):
var parsleyConfig = { errorsContainer: function(parsleyField) { return $('#errors'); } };
使用 DOM 属性更改容器
如果您只有一个输入（或一组输入，就像您一样）并且您想更改这些输入上的错误容器，则可以使用
data-parsley-errors-container="#element"（请参阅文档）。这是一个示例（jsfiddle 演示）<fieldset> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" required data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" value="option1" data-parsley-errors-container="#checkbox-errors" /> 1 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox2" data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" value="option2" /> 2 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox3" data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" value="option3" /> 3 </label> <div id="checkbox-errors"></div> </fieldset>请注意
data-parsley-errors-container="#checkbox-errors"第一个复选框上的属性和字段集<div id="checkbox-errors"></div>末尾的元素。在这种情况下，您不需要
data-parsley-errors-container向所有复选框添加 ，因为您将它们与data-parsley-multiple="checkbox2".设置 Parsley 使用的自定义配置
如果您有几个或所有输入，并且您想更改默认容器的位置。假设您的所有字段都放置在一个字段集内，并且您希望在字段集的末尾显示错误。
此解决方案允许您更改每个字段的默认容器（jsfiddle 演示）
<fieldset> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" required data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" value="option1" /> 1 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox2" data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" value="option2" /> 2 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox3" data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" value="option3" /> 3 </label> <div id="checkbox-errors"></div> </fieldset> <script> $(document).ready(function() { var parsleyConfig = { errorsContainer: function(parsleyField) { var fieldSet = parsleyField.$element.closest('fieldset'); if (fieldSet.length > 0) { return fieldSet.find('#checkbox-errors'); } return parsleyField; } }; $("form").parsley(parsleyConfig); }); </script>在这个解决方案中，我们
<div id="checkbox-errors"></div>在字段集的末尾添加了元素并更改了errorsContainerParsley的选项。如果我们的元素在字段集内，错误将显示在#checkbox-errors.基于此示例，您还可以为所有字段设置相同的容器。在这种情况下，您的选择将是这样的（jsfiddle 演示）：
var parsleyConfig = { errorsContainer: function(parsleyField) { return $('#errors'); } };
回答by Piotr ?ojewski
Try this:
试试这个：
$.listen('parsley:field:error', function(fieldInstance){
var fieldName = fieldInstance.$element.attr('name');
var field = $('input[name="'+fieldName+'"]');
var fieldWrapper = field.parents('fieldset');
if (fieldWrapper.find('.errors_container').length > 0) {
setTimeout(function(){
fieldWrapper.find('.errors_container').append(fieldWrapper.find('.parsley-errors-list'));
},100);
}
});
$('form').parsley();
}
Use class, because it works for many fields.
使用类，因为它适用于许多领域。
回答by Dinesh Saxena
For this kind of UI errors in the parsley js. You can use the data-parsley-errors-containercustom validator for placing the parsley error message as per your form needs.
对于欧芹js中的这种UI错误。您可以使用data-parsley-errors-container自定义验证器根据表单需要放置欧芹错误消息。
<div>
<div class="radio radio-primary">
<input type="radio" id="cellPhone1" value="1" name="rd_cell_phone" required="" data-parsley-error-message="Please select an option" data-parsley-errors-container="#cell-phone-validation-error-block">
<label for="cellPhone1"> Yes </label>
</div>
<div class="radio radio-primary">
<input type="radio" id="cellPhone0" value="0" name="rd_cell_phone" required="" data-parsley-error-message="Please select an option" data-parsley-errors-container="#cell-phone-validation-error-block">
<label for="cellPhone0"> No </label>
</div>
</div>
<div class="margin-top10" id="cell-phone-validation-error-block"></div>