[jQuery] リアルタイムに入力フォームのバリデーションをチェックするコード集

ホーム
BLOG
Programming｜開発
[jQuery] リアルタイムに入力フォームのバリデーションをチェックするコード集

[jQuery] リアルタイムに入力フォームのバリデーションをチェックするコード集

Programming｜開発
2018.08.09

WEBページ作成時に作るに手間がかかる入力バリデーションチェック。PHP等のサーバサイドでのチェック方法もありますが、クライアントサイドでチェックできればリアルタイムにNG箇所を伝えることができます！今回は、javascript・jQueryで実装する入力フォームのバリデーションチェックコードをご紹介します！

Contents

共通コード
- jQuery共通コード（バリデーションチェック処理）
- HTML共通コード（表示側）
各種バリデーションチェックコード
jQuery関連記事

共通コード

jQuery共通コード（バリデーションチェック処理）

今回はjQueryで実装しますので、下記構成で組むことを想定してます。カーソルが次に移ったタイミングでチェックを行います。また、エラーがある場合は送信ボタン押しても送信されないよう制御しています(｡･ω･｡)

$(document).ready(function(){
  /* 各フォームからフォーカスアウトしたときに実行 */
  $(":text,textarea,:password").blur(function(){
    *****ここにバリデーションチェック処理を追加する*****
  });
	
  /* 送信ボタンを押したときにエラーがあれば表示する */
  $('form').submit(function(e){
    /* エラー表示時は送信不可 */
    if($('div').hasClass('vErrorMsg') == true){
      e.preventDefault();
      alert('入力エラーが(´∀｀*)ﾎﾟｯ');
    }
  });
});

HTML共通コード（表示側）

今回は、各種input項目にvalidate属性を追加し、そこにチェックしたい種類をスペース空きで書く方法で実装します！

<!-- 必須入力 + 禁則文字チェックをする場合 -->
<input type="text" name="name" validate="required blacklist" />

DEMO Page

各種バリデーションチェックコード

必須入力チェック

どの入力フォームでも基本的には必要になる必須入力チェックは、下記コードで実現できます！html側は、validate属性に「required」を追加すると、入力されているかどうかをチェックすることができます！

if($(this).attr('validate').match("required")){
  if($(this).val() == ""){
    if($(this).next().text() === ""){
      $(this).after("<div class='vErrorMsg'>入力必須項目です</div>");
    }
    return true;
  }else{
    if($(this).next().text() !== "") $(this).next().remove();
  }
}

半角数字チェック

電話番号など、半角数字のみを許可するチェックは、下記コードで実現できます！html側は、validate属性に「numeric」を追加すると、入力されているかどうかをチェックすることができます！

if($(this).attr('validate').match("numeric")){
  if(!$(this).val().match(/^[0-9]+$/g)){
    /* ※エラーが表示されていないときのみエラーを表示 */
    if($(this).next().text() === ""){
      $(this).after("<div class='vErrorMsg'>半角数字のみで入力してください</div>");
    }
    return true;
  }else{
    /* エラーがなくなったら、エラー用divを削除 */
    if($(this).next().text() !== "") $(this).next().remove();
  }
}

半角英字チェック

氏名の英語名など、半角英字のみを許可するチェックは、下記コードで実現できます！html側は、validate属性に「alpha」を追加すると、入力されているかどうかをチェックすることができます！

if($(this).attr('validate').match("alpha")){
  if(!$(this).val().match(/^[a-z,A-Z]+$/g)){
    if($(this).next().text() === ""){
      $(this).after("<div class='vErrorMsg'>半角英字のみで入力してください</div>");
    }
    return true;
  }else{
    if($(this).next().text() !== "") $(this).next().remove();
  }
}

半角英数チェック

半角数字と半角英字のみを許可するチェックは、下記コードで実現できます！html側は、validate属性に「alpNumeric」を追加すると、入力されているかどうかをチェックすることができます！

if($(this).attr('validate').match("alpNumeric")){
  if(!$(this).val().match(/^[a-zA-Z0-9]+$/g)){
    if($(this).next().text() === ""){
      $(this).after("<div class='vErrorMsg'>半角英数字のみで入力してください</div>");
    }
    return true;
  }else{
    if($(this).next().text() !== "") $(this).next().remove();
  }
}

全角カタカナチェック

氏名のカタカナ等、全角カタカナのみを許可するチェックは、下記コードで実現できます！html側は、validate属性に「katakana」を追加すると、入力されているかどうかをチェックすることができます！

if($(this).attr('validate').match("katakana")){
  if(!$(this).val().match(/^[ァ-ン]+$/g)){
    if($(this).next().text() === ""){
      $(this).after("<div class='vErrorMsg'>全角カタカナで入力してください</div>");
    }
    return true;
  }else{
    if($(this).next().text() !== "") $(this).next().remove();
  }
}

メールアドレスチェック

メールアドレスの形式のみを許可するチェックは、下記コードで実現できます！html側は、validate属性に「mailadd」を追加すると、入力されているかどうかをチェックすることができます！

if($(this).attr('validate').match("mailadd")){
  if(!$(this).val().match(/^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/g)){
    if($(this).next().text() === ""){
      $(this).after("<div class='vErrorMsg'>メールアドレスの形式で入力してください</div>");
    }
    return true;
  }else{
    if($(this).next().text() !== "") $(this).next().remove();
  }
}

禁則文字チェック

その他、SQLインジェクションにつながる文字等、禁則文字がないかどうかをチェックする処理は、下記コードで実現できます！html側は、validate属性に「blacklist」を追加すると、入力されているかどうかをチェックすることができます！

if($(this).attr('validate').match("blacklist")){
  if($(this).val().match(/['\"\\|\$+\*={}<>~^`:;.%]+/g)){
    if($(this).next().text() === ""){
      $(this).after("<div class='vErrorMsg'>入力に使用できない文字が含まれています</div>");
    }
    return true;
  }else{
    if($(this).next().text() !== "") $(this).next().remove();
  }
}

いかがでしたでしょうか？jQueryを活用してリアルタイムに入力値チェックをして、ユーザのストレスを減らしましょう！尚、jsのみではブラウザ側でOFFにすることもできちゃうので、下記のようなサーバサイドでのチェックも忘れずに追加しておきましょう！