バリデーションのjsライブラリを探し求めて

フロントのバリデーションで欲しい機能

  • input移動時に検証 or キーアップごとに検証
  • メッセージ要素・位置・言語の自由度
  • 検証のカスタムルールの自由度
  • 非同期で検証が可能か

validator.js

chriso/validator.js
String validation. Contribute to chriso/validator.js development by creating an account on GitHub.
  • jQueryに依存していない
  • Laravelのバリデーションパターンに類似
  • 文字列のバリデーションのみを行い、keyupなどのイベント処理は自分で書く

validationjs

skaterdav85/validatorjs
A data validation library in JavaScript for the browser and Node.js, inspired by Laravel's Validator. - skaterdav85/validatorjs

名前がそっくりなんで「フロントサイドのバリデーションにはvalidatorjsが便利」この記事をずっと上のライブラリと勘違いしてて「?」でした。機能もほとんど同じ模様。
バリデーションのルールの記述がLaravelとまったく同じなので、Laravelを使用するサイトでは積極的に採用したいですね。

var rules = {
	name: 'required',
	email: 'required|email',
}
var rules = {
  'users.*.name': 'required',
  'users.*.bio.age': 'min:18'
  'users.*.bio.education.primary': 'string',
  'users.*.bio.education.secondary': 'string'
};

jquery-validation

イベント周りも標準で設定されているので、これが一番導入しやすいです。

jquery-validation/jquery-validation
jQuery Validation Plugin library sources. Contribute to jquery-validation/jquery-validation development by creating an account on GitHub.

form要素外にエラーメッセージを置くように修正すると、検証のたびにエラーメッセージが増えていくので注意。

errorPlacement: function(error, element) {
    error.appendTo("#js-alert");
}

コメント