Parsley.js フォームバリデーション チートシート

Parsley.js は、定型コードを書くことなく優れた UX のクライアントサイド・フォームバリデーションを提供するライブラリです。

初期化

// 推奨される JavaScript 初期化
$('#myForm').parsley({
  errorClass: 'is-invalid',
  successClass: 'is-valid'
});

---

標準 HTML バリデーション制約

<!-- 必須入力 -->
<input required />

<!-- Email および URL 形式 -->
<input type="email" />
<input type="url" />

<!-- 文字数の長さ制限 -->
<input minlength="6" maxlength="20" />
<input data-parsley-length="[6, 20]" />

<!-- 数値および正規表現パターン -->
<input pattern="^[A-Z0-9]+$" />
<input data-parsley-type="digits" />
<input data-parsley-type="alphanum" />

<!-- 数値の範囲制限 -->
<input type="number" min="1" max="100" />
<input data-parsley-range="[1, 100]" />

<!-- チェックボックスの最小選択数 -->
<input type="checkbox" name="hobbies" data-parsley-mincheck="2" />

<!-- パスワード確認の一致検証 -->
<input id="password" type="password" />
<input type="password" data-parsley-equalto="#password" />

---

フォーム & フィールド JavaScript API

フォームのメソッド

const form = $('#myForm').parsley();

form.isValid();   // 有効な場合は true、無効な場合は false を返却
form.validate();  // バリデーションを実行しエラーメッセージを描画
form.reset();     // バリデーション状態をリセットしエラーをクリア
form.destroy();   // フォームから Parsley のイベントハンドラーを解除

フィールドのメソッド

const field = $('#username').parsley();

field.isValid();
field.validate(); // 違反した制約オブジェクトの配列を返却

---

カスタムバリデータ

ドメイン固有のカスタムバリデータをグローバル登録：

window.Parsley.addValidator('multipleOf', {
  requirementType: 'integer',
  validateNumber(value, requirement) {
    return value % requirement === 0;
  },
  messages: {
    ja: 'この値は %s の倍数である必要があります。',
    en: 'This value must be a multiple of %s.'
  }
});

HTML 内での使用方法：

<input type="number" data-parsley-multiple-of="5" />

---

参考リンク

• Parsley.js 公式ドキュメント