フォーム入力時に誤りがあるとリアルタイムで教えてくれるバリデーション

フォーム入力時に誤りがあるとリアルタイムで教えてくれるバリデーション

スポンサーリンク

スポンサーリンク

お問い合わせフォームを入力する際に、記入漏れがあるかどうかをリアルタイムでユーザーに認知させることが出来るバリデーションを実装する方法を紹介します。

バリデーションを実装することで得られるメリット

  • 日本語対応なのでわかりやすい
  • フォームを入力しているユーザーにリアルタイムで不備を知らせてくれる
  • エラー項目があれば自動的にその場所までスクロールしてくれる
  • 項目別にバリデーションの実装/非実装を指定できる

企業サイトやECサイトにとって、ユーザーからのお問い合わせは非常に重要な要素の1つです。

ですが、実際にお問い合わせをしようと考えたはいいもの、お問い合わせフォームを入力して送信を完了するユーザーの割合は60%未満だと言われています。

もちろん、フォームの入力項目の数や入力がしやすいかどうか、といったことも関係してきます。

そして何よりも密接に関わってくるのが、ユーザーの入力ミスによって再度入力をしないといけないのが面倒、という人為的な要因が大きいのが実情です。

ユーザーの人為的ミスを減らす、あるいは失くすためにサイト側が事前に準備しておくことが出来るのが、このバリデーションです。

フォーム入力時に不備をリアルタイムでチェックしてくれるバリデーション

バリデーションの実装方法

フォームへの入力をリアルタイムでチェックしてくれるバリデーションの実装は、既存のjQueryを使わせてもらうのでほとんどがコピペで可能です。

GitHubでjsファイルをダウンロード

まずは必要なファイルを用意します。

GitHub/jQuery-Validation-Engineにて、ZIPファイルをダウンロードします。

GitHubでZIPファイルをダウンロード

ダウンロードしたZIPファイルを解凍し、必要となる下記の4つのファイルをサーバーの任意のディレクトリにアップロードします。

※()は解凍したファイルの必要となるファイルが入っている階層です。

  1. jquery-1.8.2.min.js(js>ココ)
  2. jquery.validationEngine.js(js>ココ)
  3. jquery.validationEngine-ja.js(js>languages>ココ)
  4. validationEngine.jquery.css(css>ココ)

HTML

先ほどアップロードしたファイルを、HTMLの<head>内に追記します。

スクリプト

続いてスクリプトをHTMLの<head>内に追記します。

3行目のIDと、バリデーションを実装する問い合わせフォームとのIDを関連付けてください。

例)スクリプト3行目のIDを「form」とした場合、問い合わせフォームのタグも「<form id=”form”>」とする。

フォームの項目別にバリデーションを実装

問い合わせフォームの、バリデーションを実装したい項目にクラス「class=”validate[チェックする内容]”」を付与します。

入力を必須とする項目

例えば、項目への入力を必須としたい場合には下記のように記述します。

入力データの形式をチェックする項目

メールアドレスが正しく入力されているか(英数字と@が入っているか)どうかをチェックする場合

電話番号が正しく入力されているか(数字が入っているか)どうかをチェックする場合

サイトURLが正しく入力されているか(httpもしくはhttpsで始まる英字列か)どうかをチェックする場合

まとめ

お問い合わせフォームへの入力をリアルタイムでチェックしてくれるバリデーションは、ユーザーの人為的な入力ミスを無くしてくれるだけではなく、迷惑メールの防止にも繋がります。

次回は、入力したメールアドレスと確認用メールアドレスの値が同一かどうか、入力する文字数が○文字以下の場合はエラー表示をさせる、といったようなバリデーションの実装方法を紹介したいと思います。

ここまでお読みいただきまして、誠にありがとうございました。

スポンサーリンク

スポンサーリンク

スポンサーリンク