0

デフォルトでは、Parsley は 1 つの要素のクラス (通常は無効なエントリがある入力フィールド) の更新のみを処理します。ただし、Bootstrap 4 では、フォーム グループと入力フィールド クラスの両方を更新して、検証アイコンでレンダリングする必要があります。それ以外の場合は、境界線の色のみが変更されます。

クライアントでユーザー入力を検証するときに、Parsley を使用して入力フィールドを正しく完全にスタイルするにはどうすればよいですか?

4

1 に答える 1

4

Bootstrap 4 を Parsley で正しくスタイルするには、div.form-group周囲のinputフィールドのクラスを変更する必要があります (私が行ったように、検証アイコンが必要であると仮定します)。

ドキュメントによると、入力フィールドに.has-successor.has-dangerを追加してから、それぞれ入力フィールドにanddiv.form-groupを指定する必要があります。form-control-successform-control-danger

ただし、デフォルトでは、Parsley は 1 つの要素のクラスの更新のみをサポートしています。幸いなことに、これはイベント バインディングをサポートしているため、parsley.js ファイルの末尾に小さな関数を追加することで、ユーザーが検証エラーを修正したときに div.form-group スタイルの更新を処理できます。

最初にパセリを構成します。

errorClass: "form-control-danger",
successClass: "form-control-success"

これらは、デフォルトで Parsley が動作する入力フィールドに適用する正しいクラスです。次に、以下をparsley.(min).jsファイルに追加します。

window.Parsley.on('field:validated', function(e) {
    if (e.validationResult.constructor!==Array) {
        this.$element.closest('.form-group').removeClass('has-danger').addClass('has-success');
    } else {
        this.$element.closest('.form-group').removeClass('has-success').addClass('has-danger');
    }
});

上記は、フィールドが検証されたときにリッスンするdiv.form-groupため、入力フィールドが適切にレンダリングされるように、Bootstrap 4 ドキュメントに従って関連するものを更新します。

于 2016-05-16T16:55:44.177 に答える