• seo対策リンク SEO対策
    SEO対策で重要な被リンク元の調べ方 | 初心者向けのSEO対策ノウハウ
    2019年05月16日
  • ブログ
    5分でブログサイト完成!ワードプレスで簡単ブログサイト作成術
    2019年03月28日
  • 被リンクの量と質 SEO対策
    SEO対策で重要な被リンク元の数と質 | 初心者向けSEO対策ノウハウ
    2019年05月16日
  • 歯医者さんのブログ記事 ブログ集客
    見ているだけ参考になる歯科のブログ3選!歯科のホームページ制作
    2019年03月12日
  • SEO対策 SEO対策
    SEO初心者向けのSEO実践ノウハウ!7個のポイントをご紹介
    2019年05月16日
  • 採用サイト ホームページ制作
    奈良の求人サイト制作会社が教えるIndeed活用ノウハウ!ダイレクト・リクルーティング
    2019年03月14日
  • ユーザー属性 SEO対策
    SEOでアクセス数アップを目指すには、10のユーザー種別の理解がポイント
    2019年05月16日
  • ローカル検索 SEO対策
    ローカルSEOの内部対策!商圏エリアで検索上位を獲得する方法
    2019年05月16日
  • 被リンク対策 SEO対策
    SEO対策で重要な被リンク元の増やし方 | 初心者向けSEO対策ノウハウ
    2019年05月16日
  • Webデザイン ホームページ制作
    ホームページ制作はスマホファーストの時代!デバイスの多様化に対応
    2019年02月26日
バリデーション付き問い合わせフォーム!jQuery初心者向け サンプルコード付き

こんにちは。
JOYCONNECTのデザイン担当、デザインマスターです。

今回は問い合わせフォームのユーザビリティを向上させる、
バリデーション付きメールフォームを実装していきます。

>>デモをチェック

バリデーション付き問い合わせフォームを実装

バリデーション

フォームに入力された内容に漏れやミスがないかチェックする「バリデーション機能」を実装すると、
問い合わせフォームは格段に使いやすくなります。

バリデーションによる効果

・離脱率を減らせる
・コンバージョン率の向上

バリデーションルールをclass属性で指定する

・必須項目の「お名前」「性別」「どこでこのサイトを知りましたか?」「お問い合わせ内容」が入力されているか?
・「郵便番号」が数値で入力されているか?
・「メールアドレス」がメールアドレスの書式になっているか?
・「その他」にチェックが入っていた時に内容が入力されているか?

HTMLはフォーム全体をdl/dt/dd要素で記述し、
dt要素に「お名前」などの項目名を、
dd要素にinput要素などのフォーム部品を配置しています。

各フォーム部品(input/textarea要素)にはバリデーションの条件を示す
・validate
・required
・number
・mail
などの属性をつけます。

CSSではフォーム部品や項目名の基本スタイルとともに、
バリデーションエラー用のスタイルも定義します。

バリデーションスクリプトでは、
バリデーションエラー時にdd要素にclass属性「error」を追加します。

上記スクリプトは全てsubmitイベント内に記述しています。
submitイベントは送信ボタン(type属性がsubmitのinput要素)がクリックされた時に発生するイベントです。

submitイベント内の処理では、
最初にエラーを初期化します。

というのも、送信ボタンを初めて押された時は問題ないですが、
すでにボタンを押されている場合は、エラーメッセージがなんども追加されたり、
修正済みの項目のエラーメッセージが消えなかったりためです。

removeClass()で「error」というclass属性を取り除き、
remove()でエラーメッセージ(p要素)を削除します。

初期化が済んだら、テキスト入力フォームのバリデーションを実行します。

グループセレクターでclass属性に「validate」が付いている1行テキスト入力フォームと、複数行入力フォームを選択し、
each(function(){…})でそれぞれの要素に対してバリデーション処理を適用していきます。

必須項目のチェック

バリデーション

class属性が「required」の要素を入力必須項目としてチェックします。

hasClass(クラス名)は、セレクターで指定した要素が()内のclass属性値を持っているか確認する命令です。

class属性値を持っていればtrueを返すので、
if文の条件式を利用することで、指定したclassを持っている場合のみif{…}の処理を実行できます。

上記スクリプトでは、
$(this)、つまりeach()で指定したclass属性「validate」を持っている要素にclass属性「required」が指定されているか確認し、
requiredが指定されていれば、さらにif文で入力フォームの値があるか確認しています。

そして値が空の場合のみエラーメッセージを表示します。
入力フォームの内容はval()で取得できます。

エラーメッセージは、エラーが発生した入力フォームのすぐ上に表示します。

フォームのHTMLは以下のようになっているので、

チェックしたinput要素の親要素(dd要素)に移動し、
dd要素の内部の先頭にエラーメッセージを挿入します。

指定した要素から親要素に移動するには、
jQueryのparent()という命令を使えばOKです。

また要素内部の先頭にHTMLを挿入する命令はprepend()なので、
prepend()でp要素を挿入すると、バリデーションエラー時のHTMLは以下のように変わります。

数値のチェック

バリデーション

class属性に「number」が指定されている要素では、
入力された値が数値かどうかをチェックします。

数値のチェックには、isNaN()というjavaScriptの命令を使います。

isNaN()をif文の条件に設定すると、
値が数値ではない場合に正しくなり、if(){…}内の命令を実行します。

エラーメッセージを追加する処理は、
必須項目の場合と同じです。

メールアドレスのチェック

バリデーション

class属性が「mail」の要素では、
入力されているテキストがメールアドレスかどうかをチェックします。

メールアドレスの正規表現を使って、
一般的なメールアドレスの書式に合致するか調べます。(簡易的なチェック)

指定したパターンとテキストが一致しているか調べるには、
match()というJabaScriptの命令を使用します。

match()内に「/.+@.+\..+/g」と記述すると、
「@(アットマーク)を含み、その後の内容に.(ドット)が存在するか」を調べられます。

$(this).val().match(…)の前に!(エクスクラメーションマーク)をつけると、
指定した書式と入力されているテキストの内容が異なる場合に、
if(){…}内の命令が実行されます。

メールアドレス確認のチェック

class属性に「mail_check」と付いている要素に対しては、
前に入力したメールアドレス欄と内容が一致しているか照合します。

照合先のフォームはname属性の値を取得し、
取得した値から「_check」を取り除いたname属性をもつ要素が照合先のフォーム部品です。

name属性から_checkを取り除くのはreplace()を使用し、
name属性が付いている要素は属性セレクターで取得します。

ラジオボタンの必須チェック

バリデーション

ラジオボタンのバリデーションは、
class属性に「validate」と「required」の両方が設定されている要素を対象に実施します。

同じname属性が設定されているラジオボタンのうち、
チェックの入っているボタンが1つ以上存在するか調べています。

チェックの入っているボタンは、
:checkedフィルターで特定でき、セレクターに合致する要素の数はjQueryの命令lengthを使って調べられます。

lengthで調べた結果、
チェックの入っているボタンの数が0の場合に、エラーメッセージを表示します。

チェックボックスの必須チェック

バリデーション

チェックボックスはラジオボタンのようにグルーピングする機能がないので、
親要素(dd要素)に「checkboxRequired」というclass属性をつけ、
その子要素のチェックボックスが選択されているか調べます。

class属性が「checkboxRequired」の要素の子要素にあるチェックボックスのlengthが0、何もチェックが付いていない場合のみエラーを表示します。

その他項目のチェック

バリデーション

チェックボックスの「その他」にチェックが入っている場合は、
その後の1行テキスト入力フォームにテキストが入力されているか調べます。

特定のチェックボックスにチェックが入っているかどうかは、
if文で条件を$(セレクター).prop("checked")とすることで調べられます。

if文の後半では、
セレクターで選択されている要素のname属性値を読み出し、
replace()と正規表現を使って「_text」を付け加えたname属性値を持つ要素の入力値を調べます。(入力値はval()を使って調べられます。)

要するに、class属性「validate」「add_text」のチェックボックスにチェックが入っており、
かつチェックボックスのname属性値に_textをつけたname属性のテキスト入力フォームが空の場合に、
エラーメッセージを表示します。

バリデーションエラー時の処理

エラー時には<p class='error'>エラー内容</p>というHTMLが追加されていますので、if文を使ってHTMLが追加されているかチェックします。

エラーがあった場合は、
animate()を使って最初にエラーがあったフォーム要素(p.error:first)にスクロールアニメーションで移動します。

スクロールアニメーションは、
セレクターにhtml,bodyを指定して、animate()でscrollTopを変更します。

あとは、エラーが発生している要素の親要素にaddClass()でclass属性「error」を追加し、return false;でフォームの送信処理を中断すると完成です。

関連キーワード
  • jQuery
    jQueryを使ってCSSのスタイルを変更(アニメーション)!jQueryの基礎 -初級編-
  • バリデーション
    バリデーション付き問い合わせフォーム!jQuery初心者向け サンプルコード付き
  • フローティングウィンドウ
    フローティングウィンドウを実装!jQuery初心者向け サンプルコード付き
  • モーダルウィンドウ
    jQueryでモーダルウィンドウを自作!コピペで使えるコード付き
  • ドロップダウンメニュー
    多階層ドロップダウンメニュー(グローバルメニュー)を自作!サンプルコード付き
  • 正規表現
    文字列の置換に便利な正規表現 - JavaScript
ホームページ制作・WEBコンサルティングのご相談は無料

JOYCONNCTでは、社内の人材不足やノウハウ不足により、
WEB集客に関するお悩みを抱えられている中小企業様のサポートをしております。

TEL: 0742-55-4737/営業時間: 9:00〜18:00(平日)

この記事が気に入ったら
フォローしよう

最新情報をお届けします

おすすめの記事