jQueryライブラリを使用して、簡単Form項目の入力チェック実装

こんにちは、樋口です。

画面から入力された、入力値の入力チェック。
WEBシステムを制作した方は、一度は経験があるのではないでしょうか。
実際に入力チェックを実装すると、いろいろと面倒だと思います。

そこで今回は、jQueryライブラリである、jquery.validateについてご紹介します。

今回は下記ライブラリを使用して説明をしていきます。

jQuery

1.10.2

validate

1.15.0

BootStrap(CSS使用)

3.2.0

ライブラリの入手

jquery.validateの使用は下記公式サイトよりダウンロードできます。
jquery.validate公式サイト
ダウンロード後ZIPファイルを解凍し、「jquery.validate.min.js」を読み込むことにより使用可能となります。
※ ライブラリパスは、自身の設置したものを記載してください。

必須入力の追加

まずは、入力用のHTMLを用意してきます。
ここでは、名前を入力するエディットを用意します。

– index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,  initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>入力チェック</title>
	<link rel="stylesheet" href="bootstrap.min.css">
  </head>
  <body>  
    <div id="wrap">
      <!-- Begin page content -->
      <div class="container">
        <div class="col-lg-12">
          <div class="form-group">
            <label style="font-size: 20px;">入力チェックサンプル</label>
	      </div>
          <form class="form-signin" id="commentForm">
            <div class="col-lg-12">
			   <div class="form-group">
	            <label class="control-label col-lg-1" style="font-size: 25px;">名前</label>
			     <div class="col-lg-4">
                  <input class="form-control" id="cname" name="name" type="text">
                </div>
		      </div>
	        </div>
          </form>
	    </div>
	  </div>
	</div>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.validate.min.js"></script>
    <script type="text/javascript" src="valCheck.js"></script>
  </body>
</html>

次に、入力チェックを有効にする為、JSファイルを作成し下記内容を記載します。
※ 今回は、「valCheck.js」を使用していきます。

– valCheck.js

(function(){

  //入力項目のチェック方式を記載
  var rule = {
    name: {required: true}
  };

  //各項目のエラーメッセージ定義
  var msg = {
    name: {
      required: "※名前は必須項目です。"
    }
  };

  $(function(){
    // 入力チェック対象のフォームIDを指定
    $('#commentForm').validate({
      rules: rule, 
      messages: msg
    });
  });
})();

– 必須入力エラー

最小文字数・最大文字数の追加

次に先ほどの名前エディットに、最小文字数・最大文字数の入力チェックを追加します。
先ほどのJSファイルに下記内容を追加します。

– valCheck.js

(function(){

  //入力項目のチェック方式を記載
  var rule = {
    name: {required: true,  minlength: 2,  maxlength: 10}
  };

  //各項目のエラーメッセージ定義
  var msg = {
    name: {
      required: "※名前は必須項目です。", 
      minlength: "※名前は2文字以上入力してください。", 
      maxlength: "※名前は11文字以下で入力してください。", 
    }
  };

  $(function(){
    // 入力チェック対象のフォームIDを指定
    $('#commentForm').validate({
      rules: rule, 
      messages: msg
    });
  });

})();

– 最小文字数エラー

– 最大文字数エラー

数値入力チェックの追加

次に、数値のみの入力チェックを追加します。

– index.html

			  <div class="form-group">
	            <label class="control-label col-lg-1" style="font-size: 25px;">年齢</label>
			     <div class="col-lg-4">
                  <input class="form-control" id="cage" name="age" type="text">
                </div>
		      </div>

JSファイルに、数値チェックを追加します。

– valCheck.js

(function(){

  //入力項目のチェック方式を記載
  var rule = {
    name: {required: true,  minlength: 2,  maxlength: 10}, 
    age: {number: true}
  };

  //各項目のエラーメッセージ定義
  var msg = {
    name: {
      required: "※名前は必須項目です。", 
      minlength: "※名前は2文字以上入力してください。", 
      maxlength: "※名前は11文字以下で入力してください。", 
    }, 
    age: {
      number: "※年齢は数値で入力してください。"
    }
  };

  $(function(){
    // 入力チェック対象のフォームIDを指定
    $('#commentForm').validate({
      rules: rule, 
      messages: msg
    });
  });

})();

– 数値入力エラー

アドレスチェック

次に、アドレスの入力チェックを追加します。

– index.html

			  <div class="form-group">
	            <label class="control-label col-lg-1" style="font-size: 25px;">mail</label>
			     <div class="col-lg-4">
                  <input class="form-control" id="cadd" name="add" type="text">
                </div>
		      </div>

JSファイルに、アドレスチェックを追加します。

– valCheck.js

(function(){

  //入力項目のチェック方式を記載
  var rule = {
    name: {required: true,  minlength: 2,  maxlength: 10}, 
    age: {number: true}, 
    add: {email: true}, 
  };

  //各項目のエラーメッセージ定義
  var msg = {
    name: {
      required: "※名前は必須項目です。", 
      minlength: "※名前は2文字以上入力してください。", 
      maxlength: "※名前は11文字以下で入力してください。", 
    }, 
    age: {
      number: "※年齢は数値で入力してください。"
    }, 
    add: {
      email: "※メールアドレスを入力してください。"
    }
  };

  $(function(){
    // 入力チェック対象のフォームIDを指定
    $('#commentForm').validate({
      rules: rule, 
      messages: msg
    });
  });

})();

– メールアドレス入力エラー

最後に

今回紹介したライブラリを使用した入力チェックは、他にもありますので、興味がありましたらぜひ調べてみてください！
今後もjavaScriptの便利ライブラリについて紹介していけたらと思っています。

それではまた。