web-dev-qa-db-ja.com

Parsley.js-エラーコンテナを変更します

各エラーメッセージの位置を変更したい。つまり、それぞれの<div class="errorBlock"></div>にエラーメッセージが表示されます。ドキュメントのコードを使用すると、エラーメッセージが要素（入力）の前に表示され、期待どおりに表示されません。何か案は？

ドキュメントによると：

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;
    }
}

私の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>

[〜＃〜]チェックボックス[〜＃〜]

<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>
jqueryvalidationparsley.js
12
andreas777

Parsleyのデフォルトオプション を上書きすることでこれを行うことができます。 （注：最新バージョン[v2.0]について話しているので、使用することをお勧めします）基本的に、入力フィールドに基づいて.errorBlockコンテナーを検索するメソッドをParsleyに提供します。次のようになります。

var parsleyConfig = {
    errorsContainer: function(pEle) {
        var $err = pEle.$element.siblings('.errorBlock');
        return $err;
    }
}

$('#yourFormID').parsley(parsleyConfig);

そして これが実際の例です 。

注：このメソッドを使用すると、Makrandが提案するparsley-validate属性を使用できません。フォームで.parsleyを呼び出すと、カスタムオプションをフォームに追加できることを除いて、同じことが行われます。また、すべてのパセリ属性はデータ属性であるため（v2.0以降）、接頭辞data-を付ける必要があります。

13
Timothy Miller

これを試して：

parsley-error-container=".errorBlock"

この属性は Parsley Documentation で確認できます。

7
Ahmad Hussain

ParsleyAPIが更新されました。現在の方法は次のとおりです。

data-parsley-errors-container="#your-div-id"

こちらのドキュメントを参照してください： http://parsleyjs.org/doc/index.html#psly-ui-for-field

6
btburton42

@ahmad hussainの回答を参照して、フォームに属性を入力する必要もあります。

<form parsley-validate>
0
Makrand