1. TOP
  2. JavaScript
  3. 【実用的なサンプルあり】jQuery Validation Pluginの使い方
詳しくはこちら
JavaScript
 | 

【実用的なサンプルあり】jQuery Validation Pluginの使い方

フォームのバリデーションを手軽に実装出来るjQueryのプラグインjQuery Validation Pluginの基本的な使い方、実際に使う際に役に立つTipsをご紹介いたします。

公式サイト：https://jqueryvalidation.org/

目次

バリデーションとは

jQuery Validation Pluginをご紹介する前に、バリデーションについて簡単に紹介します。

バリデーションとは、お問い合わせなどのフォームでユーザーが正しい値、形式で入力したかどうかをチェックする機能のことです。

正しい値、形式で入力していなかった場合、入力内容は送信することが出来ません。このようにバリデーションをかけることで、管理者側の求めるデータを入力してもらうと同時に、悪意のあるデータが送られてくることを防ぐことが出来ます。

注意点

バリデーションを実装する際の注意点がひとつあります。

今回は、jQueryのプラグインjQuery Validation Pluginを使ってバリデーションをかけますが、あくまでjQuery（JavaScript）でバリデーションをかけているということです。

そして、jQuery（JavaScript）で実装しているということは、クライアントサイド（ユーザー側）で処理が実行されるということです。

つまり、ユーザーがJavaScriptの機能をオフにしていた場合、このバリデーションは実行されずに、正しくない値や形式を入力しても送信されてしまいます。

また、悪意のあるユーザーの場合、こちらが書いたコードを書き換えてjQueryのバリデーションをスルーさせることも可能です。なので、意図的にスクリプトデータや大量のデータなどを送りつけることも可能になります。

これらのことから、フォームにバリデーションを実装する際は、クライアントサイドとサーバーサイド（サーバー側で実行されるからユーザーはデータの書き換えが出来ない）で実装するようにしましょう。

サーバーサイドでのバリデーションの実装方法は今後紹介する予定です。

Validationの使い方

使用ファイルの読み込み

jQuery Validation PluginはjQueryのプラグインなので、jQuery本体とValidationのプラグインを読み込ませます。さらに、Validationプラグインを実行させる記述をするjsファイルを作成します。

  • jQuery本体
  • jQuery Validation Pluginのプラグイン
  • jQuery Validation Pluginを実行させるファイル（HTML内に書いてもOK）

なので、bodyの終了タグの直前に以下のように記述します。

<script src="https://code.jquery.com/jquery-1.9.1.min.js" integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="./js/fileName.js" type="text/javascript"></script>

プラグインを実行させる

まずはフォームを用意します。以下のようなシンプルなフォームをサンプルとします。

<form id="form">
	<div>
		<div>
			<p>お名前</p>
			<input type="text" name="name">
		</div>
		<div>
			<p>メールアドレス</p>
			<input type="email" name="email">
		</div>
		<div>
			<p>電話番号</p>
			<input type="tel" name="tel">
		</div>
	</div>
	<button type="submit">送信する</button>
</form>

次に、プラグインを実行させるファイルに以下のように記述します。

$(function(){
	$('#form').validate({
		rules: {
			name: {
				required: true,
			},
			email: {
				required: true,
			},
			tel: {
				required: true,
			},
		},
	})
})

これでフォームにバリデーションをかけることが出来ました。

試しにブラウザ上でテキストを入力していない状態で送信ボタンを押してみて下さい。送信はされずに、エラーメッセージが表示されるかと思います。

解説

2行目の$('#form')でバリデーションを実装したいフォームを指定します。jQueryセレクタで指定出来るので、IDでもクラスでも指定することが出来ます。

その後、inputタグのname属性をrulesに渡して、required: trueと記述するとバリデーションをかけることが出来ます。

rules: {
  name: { // name属性
    required: true,
  },
  email: { // name属性
    required: true,
  },
  tel: { // name属性
    required: true,
  },
},

Validationの色々な操作方法

エラーメッセージを自由にカスタマイズ

上記のようにrulesだけを設定した場合、エラーメッセージがデフォルトのままで、以下のように英語で表示されてしまいます。

This field is required.

しかし、messagesの項目を追加することで自由にエラーメッセージをカスタマイズすることが出来ます。

以下のように記述を変えてみましょう。

rules: {
  name: {
    required: true,
  },
  email: {
    required: true,
  },
  tel: {
    required: true,
  },
},
messages: {
  name: {
    required: 'お名前を入力して下さい',
  },
  email: {
    required: 'メールアドレスを入力して下さい',
  },
  tel: {
    required: '電話番号を入力して下さい',
  },
},

messagesのrequiredに表示させたいエラーメッセージを入力します。

ひとつ注意点としては、messagesだけを記述してもバリデーションは実行されないので、rulesにも任意のname属性を渡すのを忘れないでください。

エラーメッセージを任意の位置に追加する

何も設定をしないデフォルトの状態だと、バリデーション対象のinputタグの直後にエラーメッセージの要素が追加されます。

バリデーションをかける対象がテキストボックスの場合はこれで問題ありませんが、チェックボックスやラジオボタンのようにinputタグが複数ある場合、以下のように思い通りの位置にエラーメッセージが表示されません。

<div>
	<p>チェックボックス</p>
	<div id="checkWrap">
		<div>
			<input type="checkbox" name="check[]" id="check1">
			<label for="check1">チェックボックス1</label>
		</div>
		<div>
			<input type="checkbox" name="check[]" id="check2">
			<label for="check2">チェックボックス2</label>
		</div>
		<div>
			<input type="checkbox" name="check[]" id="check3">
			<label for="check3">チェックボックス3</label>
		</div>
	</div>
</div>

上記サンプルの場合、一つ目のinputタグの直後にエラーメッセージが追加されているので、このような見た目になってしまっています。これだとユーザビリティ的にも問題があります。

そこで、errorPlacementを使って、エラーメッセージの場所を調整してみます。

rules: {
  'check[]': {
      required: true,
  },
},
errorPlacement: function(error, element){
  if(element.attr('name')=='check[]'){
    error.insertAfter('#checkWrap')
  } else{
    error.insertAfter(element)
  }
}

6行目の('name')=='check[]')でname属性を指定して、7行目のinsertAfter('#checkWrap')でどこにエラーメッセージを表示させるかを指定しています。

上記の場合、name属性の値がcheck[]の要素を指定して、#checkWrapの後ろにエラーメッセージを表示させるように設定しています。

jQueryのinsertAfterを使って任意の場所に要素を追加させているだけなので、insertBeforeやappendなどを使うことも可能です。

 

■ 補足

チェックボックスのname属性の値に[]を付けている理由

チェックボックスが複数選択された時に、PHPで複数の値を受け取れるようにしているからname属性に[]を付けています。

[]を付けることで、配列形式で値を受け取ることが可能になり、チェックボックスが複数選択されても値を全て取得することが出来ます。

そして、お気づきの方もいるかと思いますが、上記のサンプルコードのrulesのname属性を記述する箇所で、'check[]'のようにシングルクォーテーションで囲っています。これは、name属性に[]が含まれている状態でそのまま記述すると構文エラーになってしまうからです。

正しい形式（数値やメールアドレス）で入力されているかチェックする

jQuery Validation Pluginには入力した値の形式をチェックするオプション機能があります。

例えば、メールアドレスの形式なら、@が入っていないとエラーになったり、数値の形式なら数値以外だとエラーになります。

これらは、rulesのrequiredのように記述することで設定することが出来ます。

rules: {
  mail: {
      required: true,
      email: true,
  },
  tel: {
      required: true,
      number: true,
  },
},

他にも、以下のようなオプションがあります。

プロパティ 値 説明
 equalTo  '要素名'
例）'#element'、'.mail'		 指定した要素の値と同じかどうか
 minlength  数値 指定した数値より文字数が多いかどうか
maxlength  数値 指定した数値より文字数が少ないかどうか
rangelength  [最小値, 最大値]
例）[5, 10]		 指定した最小値から最大値の値かどうか

上記で紹介したオプションのうち、equalToは便利なオプションなので、次の項目で詳しく紹介します。

指定した要素と同じ値かをチェックする

メールアドレスやパスワードを打ち間違い防止のために、値を2回入力させる場合があると思います。

そのような時に使えるオプションがequalToです。

<div>
  <div>
    <p>メールアドレス</p>
    <input type="email" name="emailFirst">
  </div>
  <div>
    <p>メールアドレス（再入力）</p>
    <input type="email" name="emailSecond">
  </div>
</div>
rules: {
  'emailFirst': {
      required: true,
  },
  'emailSecond': {
      required: true,
      equalTo: 'input[name=emailFirst]'
  },
},
messages: {
  'emailSecond': {
      equalTo: '上記で入力した値と違います'
  },
},

このように記述することで、指定した要素の値と同じ値かどうかをチェックすることが出来ます。

指定した要素がチェック状態の時のみバリデーション対象にする

簡単なサンプルを用意しました。

<div>
  <p>職業</p>
  <div>
    <div>
      <input type="radio" name="job" id="student" checked>
      <label for="student">学生</label>
    </div>
    <div>
      <input type="radio" name="job" id="society">
      <label for="society">社会人</label>
    </div>
    <div>
      <input type="radio" name="job" id="other">
      <label for="other">その他</label>
      <input type="text" name="jobOther">
    </div>
  </div>
</div>

上記htmlで、以下のような見た目になるかと思います。

この場合、「その他」を選択した場合のみ、テキストが入力されていなければエラーが出るようにしたいかと思います。

rules: {
  'jobOther': {
      required: '#other:checked',
  },
},

バリデーション対象はあくまでもテキストボックスなので、指定するname属性はテキストボックスのjobOtherです。

普段requiredはtrueしか記述しないと思いますが、'#other:checked'のように記述することで、id属性の値がotherの要素がチェックされている時にのみバリデーションをかけるという処理に変わります。

今回のサンプルはラジオボタンでしたが、もちろんチェックボックスでも利用可能です。

まとめ

jQueryで手軽にバリデーションを実装出来るプラグインjQuery Validation Pluginの基本的な使い方の解説は以上で終了です。後半はやや実用的な内容も紹介してみました。

基本的には、rulesとmessageを中心に使い、ラジオボタンなどを使う場合にはerrorPlacementを使ってエラーメッセージの出現位置を調節してあげるといいでしょう。

エラーメッセージをChromeなどのデベロッパーツールで見てみると、クラスなど属性がついているので、エラーメッセージのスタイルの調整も可能です。

最後に、本記事の前半でも説明しましたが、jQuery Validation Pluginはクライアントサイドで実行されるjsベースのバリデーション機能です。少し知識のあるユーザーは、この設定されているデータを変えて悪意のあるデータを送ることも可能です。

なので、バリデーションを実装する際は、クライアントサイド、サーバーサイド両方で実装するのを忘れないようにしましょう。

公式サイト：https://jqueryvalidation.org/

関連記事