2018年9月22日土曜日

jQuery : jQuery-Validation-Engine でバリデーションを行う

ユーザーがformに入力した値のチェックなんかは、submit後にサーバサイドで行うこともできるけれど、ユーザーからするとちょっと不便な動きだ。何かの入力フォームで、入力を終え、ボタンをクリックして終わった気でいるのに、入力エラーがあるとかなんとか表示されることは結構腹立たしい。

しかも、入力したはずの値がきれいさっぱりなくなってしまっているなんてこともままある。面倒になってそのまま離脱してしまうなんてことは、よくある話なんじゃないだろうか。ユーザー、アプリの開発者、双方にとって不幸なことだ。

そこで入力をフロントでチェックして、submitする前にユーザーに注意を促したいという要求が出てくる。自分でゴリゴリ作りこむのは面倒だけれど、こうした要求に応えてくれる便利なものがいまの世の中には存在する。

それが「jQuery-Validation-Engine」というやつだ。Githubからダウンロードできる。
https://github.com/posabsolute/jQuery-Validation-Engine




いくつかのファイルがダウンロードされるのだが、以下の4つだけを作成中のWebアプリに組み込めば取りあえず動く。

・jquery.validationEngine.js
・jquery.validationEngine-ja.js
・jquery-1.8.2.min.js
・validationEngine.jquery.css

「jquery.validationEngine.js」はjQuery-Validation-Engineの本体となるjs。

「jquery.validationEngine-ja.js」はメッセージを日本語で表示したい場合に使う。もし英語なら「jquery.validationEngine-en.js」を使うなど、様々な言語のものが用意されている。このjsの中身を見ると自作するのもさほど難しくはなさそうである。使いたい言語のものがなければ自作すればいい。また、バリデーションを追加したい場合はこのファイルに追加してやるだけでいいし、デフォルトで用意されているバリデーションもこのファイルを見れば分かる。リファレンスは英語なので読むのがちょっとつらい。

あと「jquery-1.8.2.min.js」なんだけれど、きちんと検証したわけではないが私の環境では 3.3.1 でも問題なく動いている。jqueryのバージョンにはあまりこだわらなくてもいいかもしれない。jQuery-Validation-Engineという名前の通りjQueryに依存しているのだけは確か。

「validationEngine.jquery.css」は、バリデーションメッセージを表示するときに使われるCSS。

デモ用のコードも多数用意されていて、一緒にダウンロードされてくるので、詳しくはそちらを見ればいいと思うが、さわりの部分だけ以下に示しておこうと思う。

ファイルの構成は下記のように配置した。


-+-css-+-validationEngine.jquery.css
 |-js -+-jquery.validationEngine.js
 |     |-jquery.validationEngine-ja.js
 |     +-jquery-3.3.1.min.js
 +-index.html

index.htmlの内容
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <title>jQuery-Validation-Engine</title>

  <!-- JS -->
  <script src="js/jquery-3.3.1.min.js"></script>
  <script src="js/jquery.validationEngine.js"></script>
  <script src="js/jquery.validationEngine-ja.js"></script>

  <!-- CSS  -->
  <link href="css/validationEngine.jquery.css" type="text/css" rel="stylesheet">
  
  <!-- Script -->
  <script>
    $(function(){
      jQuery("#form1").validationEngine();
    });
  </script>
</head>
<body>
  <br/><br/>
  <form id="form1">
    <input type="text" class="validate[required]" />
    <input type="submit" value="submit" />
  </form>
</body>
</html>


16行目~20行目までのスクリプトで、バリデーションを行うフォームを指定。25行目の class="[validate[required]]" の部分で具体的なバリデーションの内容を指定している。今回は必須入力チェックを意味する required を指定した。

これをブラウザで表示すると、テキストボックスとsubmitボタンがあるだけのシンプルな画面が表示される。



テキストボックスからフォーカスアウトすると自動的にバリデーションが行われて、エラー内容を表示してくれる。



submitボタンを押した時も同じで、エラーが検知されるとsubmitされずにエラーが表示される。

他にもメールフォーマットのチェックや半角英数字入力のチェック、最小文字数、最大文字数など多数のチェックを行える。複数のチェックを同時に行いたい場合は class="validate[required,minSize[10],maxSize[100]] といった感じでカンマ区切りで複数指定してあげればよい。