Parsley.jsが便利だった話

javascriptのフォームのバリデーションツールもいろいろありますが、Parsley.js が割と頭使わずに実装できたのでざっくりとご紹介。
公式サイト/Github

インストール

必須ライブラリは jQuery1.8以上
※IE8以下に対応させる場合は es5-shim

インストールはnpmかダウンロードページから。

$ npm i parsleyjs

htmlでjQueryとparslery.jsを読み込んで、対象にしたいformタグに data-parsley-validate を入れるだけ。

<script src="jquery.js"></script>
<script src="parsley.min.js"></script>

<form data-parsley-validate>
...
</form>

js側で制御したい時は下記のように。

<script src="jquery.js"></script>
<script src="parsley.min.js"></script>

<form id="form">
...
</form>

<script>
  $('#form').parsley();
</script>

使用法

必須項目でよければ対象フォーム内の該当要素にrequired要素を入れるだけ。

<input type="text" required>

他に、data-parsley-required でも設定可能。

• data-parsley-required
• data-parsley-required=”true”

その他、あらかじめ設定されているものについてはBuilt-in validatorsを参照してください。
これだけでも十分な気もしますが、独自の条件を指定することもできます。
　　
多言語対応もされており、i18n（internationalization/ i と n の間に18文字）フォルダの中に結構な数の多言語化ファイルが含まれてます。
https://github.com/guillaumepotier/Parsley.js/tree/master/dist/i18n

日本語だったらja.js、ja.extra.jsを追加で読み込んでください。

各種コールバックもEventsに用意されていますが、
submitを押した時点でValidationが実行されて、エラー文言も編集すれば即時で変更されるので、普通に使う分には特に何もしなくて良さそうです。