2

私は他のカスタムバリデーターを持っています。Parsley がそれらを使用して検証すると、必要に応じて CSS クラス parsley-success または parsley-error が追加されます。唯一のバリデーターが私のカスタムバリデーターの 1 つである場合でも、クラスは期待どおりに取得されます。

これで、それはしません。

私はパセリで検証されていますが、他のものはどちらも検証されていません。それ以外の場合、検証は正しく機能します。このバリデータが無効な場合、正しいエラー メッセージが表示され、フォームの送信が失敗し、フィールドがフォーカスされます。有効な場合は、正しい動作も得られます。ただし、CSS クラスではありません。

更新: 代わりに data-required="true" を使用するか、data-mincheck="1" (data-group はチェックボックスに固有の値です) を使用すると、まったく同じ動作が得られます。実際、振り返ってみると、CSS のことが自分で書いた理由かもしれないと思います...

誰もこの問題に遭遇しましたか? パセリについて何か誤解していますか？

チェックボックスの入力にあるためでしょうか？

myrequirechecked: function (avalue, param, self) {
    try {
        console.log("$(self.element.context).is(':checked') == %s", 
            $(self.element.context).is(':checked'));

        var ok = $(self.element.context).is(':checked') ? true : false;

        return ok;
    }
    catch (ex) {
        console.log("%cmyrequirechecked %s error: %s", 'color:red', id, ex.message);
    }
}

jQuery のイディオムについての私の理解に関する有益な情報を事前にありがとうございます (いいえ、真剣に!)

4

1 に答える 1

3

問題は、Parsley のラジオ ボタンとチェックボックスの処理が異なることです。CSS クラス .parsley-error および .parsley-success は装飾を目的としており、有効または無効として検証された要素を論理的に識別するためのものではありません。

つまり、 options.errors.classHandler(elem,isRadioOrCheckbox) が呼び出されて、どの要素が .parsley-error または .parsley-success CSS クラスを受け取るかが決定されます。ラジオ ボタンとチェックボックス以外のすべての検証により、誰が次のように CSS クラスを取得するかが決定されます (空白が追加されています)。

this.errorClassHandler = 
    options.errors.classHandler( element, this.isRadioOrCheckbox ) 
        || this.$element;

...しかし、ラジオ ボタンとチェックボックスには、次のような別のブランチがあります。

this.errorClassHandler = 
    options.errors.classHandler( element, this.isRadioOrCheckbox ) 
        || this.$element.parent();

デフォルトでは、options.errors.classHandler は空の関数であるため、undefined を「返し」、rb/cb の場合は this.$element.parent() を取得し、それ以外の場合は this.$element を取得します。これが私を手に入れたものです。

私の場合、チェックボックス自体にデフォルトのエラー状態の装飾 (赤いアウトライン) を付けるのが好きで、他の検証目的にも CSS クラスを使用しているため、常に要素自体を返す classHandler メソッドを作成しました。 .

errors: {
    classHandler: function (elem, isRadioOrCheckbox) {
        return elem;
    }
},

しかし、有効な要素として渡された要素を論理的に識別する必要もありますが、これは実際には CSS クラスの目的ではありません。フィールド有効性フラグが UI の美学と絡み合うのは望ましくありません。したがって、別の (または追加の) アプローチは、onFieldError/onFieldSuccess リスナーを追加することです。必要に応じて、チェックボックスまたはラジオ ボタンでエラー クラスを好みに合わせて設定できますが、フィールド要素が検証されたかどうか、およびそれらが成功したか失敗したかをアクセス可能に識別する無関係なメソッドを導入することもできます -- $(elem).data ('parsleyValid', ParsleyField.isValid()) など。

listeners: {
    onFieldError: function (elem, constraints, ParsleyField) {
        //  If it's radio/checkbox, Parsley puts these on the parent by default.
        if (ParsleyField.isRadioOrCheckbox) {
            $(elem).addClass(ParsleyField.options.errorClass)
                   .removeClass(ParsleyField.options.successClass);
        }
        $(elem).data('parsleyValid', false);
    }
    , onFieldSuccess: function (elem, constraints, ParsleyField) {
        //  If it's radio/checkbox, Parsley puts these on the parent by default.
        if (ParsleyField.isRadioOrCheckbox) {
            $(elem).addClass(ParsleyField.options.successClass)
                   .removeClass(ParsleyField.options.errorClass);
        }
        $(elem).data('parsleyValid', true);
    }
}
于 2013-11-14T16:43:49.783 に答える