web-dev-qa-db-ja.com

parsleyjsのparsley-errors-listの位置を変更します

フォームの検証に parsleyjs.org を使用しています。

入力に検証エラーがある場合、プラグインはui.parsley-errors-listを作成します。

問題は、.parsley-errors-listがフォーム要素の「input、textarea、radioなど」の直後に配置されていることです。次のようにレイアウトが壊れています。

enter image description here

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

代わりに、.parsley-errors-listは、コンテナ<fieldset>内の最後の子/要素になるように配置する必要があります。

これは達成可能ですか？

javascriptjqueryhtmlparsley.js
12
Leo

エラーコンテナは（少なくとも）2つの方法で設定できます。

  1. DOM属性を持つコンテナーを変更します

    入力が1つ（または入力のグループ）しかなく、それらの入力のエラーのコンテナーを変更する場合は、data-parsley-errors-container="#element"（ ドキュメントを参照 を使用できます。 =）。これが例です（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>

    最初のチェックボックスの属性data-parsley-errors-container="#checkbox-errors"と、フィールドセットの最後の要素<div id="checkbox-errors"></div>に注意してください。

    この場合、チェックボックスをdata-parsley-errors-containerで「グループ化」しているため、すべてのチェックボックスにdata-parsley-multiple="checkbox2"を追加する必要はありません。

  2. Parsleyが使用するカスタム構成を設定します

    入力が少ないかすべてで、デフォルトのコンテナの位置を変更したい場合。すべてのフィールドがフィールドセット内に配置されており、フィールドセットの最後にエラーを表示するとします。

    このソリューションでは、各フィールドのデフォルトコンテナを変更できます（ 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>

    このソリューションでは、フィールドセットの終わりの前に要素<div id="checkbox-errors"></div>を追加し、ParsleyのerrorsContainerオプションを変更しました。要素がフィールドセット内にある場合、エラーは#checkbox-errors内に表示されます。

    この例に基づいて、すべてのフィールドに同じコンテナを設定することもできます。この場合、オプションは次のようになります（ jsfiddle demo ）：

    var parsleyConfig = {
    errorsContainer: function(parsleyField) {
        return $('#errors');
    }
};
26
Luís Cruz

これを試して：

$.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();
}

多くのフィールドで機能するため、クラスを使用します。

0
Piotr Łojewski