フォームバリデーションライブラリParsley.jsでリアルタイムバリデーションを行う

JavaScriptのフォームバリデーションライブラリParsleyで入力と同時にバリデーションを行う方法を、3通り紹介します。

※Parsley v2.7.2で動作確認しています。
※Parsley.jsはJSからの起動と、HTMLにデータ属性をつけての起動が選べますが、今回は後者のやりかたを前提とします。
※今回バリデーション発火のイベントとしてkeyup focusout change inputの4つを設定しています。

<input>等のフィールドに個別にdata-parsley-trigger属性を設定

公式ドキュメントのUI for fieldの項でも解説されてたり、公式のExampleでも使われてたりしていて、きっと最初にたどり着く方法。

<form data-parsley-validate>
    <input type="text" required placeholder="テキストを入力してください" data-parsley-trigger="keyup focusout change input">
    <input type="email" required placeholder="メールアドレスを入力してください" data-parsley-trigger="keyup focusout change input">
    <button type="submit">submit</button>    
</form>

デモ

<form>タグにdata-parsley-trigger属性を設定

一番目の方法だと各フィールドにそれぞれ記載する必要があり、フィールドが多いとかなり重複する記述が増えてきてしまいます。
フィールドごとに動作をわける必要がないなら<form>につけてしまったほうが楽です。

<form data-parsley-validate data-parsley-trigger="keyup focusout change input">
    <input type="text" required placeholder="テキストを入力してください">
    <input type="email" required placeholder="メールアドレスを入力してください">
    <button type="submit">submit</button>    
</form>

デモ

Parsley.options.triggerを上書きする

フォームがサイト全体で複数個出て来るような場合、2番目の方法でも「なんだか汚いなあ」という気持ちになってきます。
Parsleyのデフォルト設定を上書きすると、上書きの記述のあるJSが読み込まれているすべてのページのフォームに対してリアルタイムバリデーションを設定できます。
公式ドキュメントのOverviewの項にちょろっとデフォルト設定への言及がありますが、このやりかたに気づくのに3ヶ月かかりました。。
記述はたったの1行。

Parsley.options.trigger = "keyup focusout change input";

デモ

---

というわけで、3通りの方法を紹介しましたが、3番目で紹介した1行を、サイト全体で読み込むJSに加えるのが一番スマートなやりかたになりそうです。