Parsley 2のブートストラップ4の使用

Question

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

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

Answer 1

Parsleyで正しくブートストラップ4をスタイルするには、inputフィールドを囲むdiv.form-groupのクラスを変更する必要があります（私のように、検証アイコンが必要な場合）。あなたはdiv.form-groupに.has-successか.has-dangerを追加し、入力フィールドにそれぞれform-control-successとform-control-dangerを指定する必要がドキュメントによると

。

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

まずパセリを設定します。

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

これらはパセリがデフォルトでオンに動作する入力フィールドに適用する正しいクラスです。次に、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'); 
    } 
}); 

上記フィールドは、入力フィールドが適切にレンダリングされることを保証するために、ブートストラップ4マニュアルに従って関連div.form-groupを更新するため、検証、およびされている場合をリッスンします。