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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-27 01:40:00  来源:igfitidea点击:

Parsley.js - change error container

jqueryvalidationparsley.js

提问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 .errorBlockcontainer 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);

And here's a live example.

而且这里有一个活生生的例子

Note: using this method you can't use the parsley-validateattribute that Makrand suggests. Calling .parsleyon 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-validateMakrand 建议的属性。调用.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>