Loading

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

ISG106130755_TP_V

WEBページ作成時に作るに手間がかかる入力バリデーションチェック。PHP等のサーバサイドでのチェック方法もありますが、クライアントサイドでチェックできればリアルタイムにNG箇所を伝えることができます!今回は、javascript・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" />

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

必須入力チェック

どの入力フォームでも基本的には必要になる必須入力チェックは、下記コードで実現できます!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にすることもできちゃうので、下記のようなサーバサイドでのチェックも忘れずに追加しておきましょう!

[PHP] 入力フォームのバリデーションチェックを実装する

[PHP] date(): It is not safe to rely on the system’s timezone settings のエラー解決法・対処法

[jQuery] フォーム送信時(Submit時)にボタン毎に遷移先URLを変更する方法

関連記事

  1. [CSS] ブラウザ毎にずれないCSS!リセットCSS・デフォルトCSSコード公…

    2018.08.07
  2. [Excel VBA] マクロでエクセルの行の高さを自動調整する方法

    2018.06.13
  3. [Excel VBA] マクロで月の日数を取得する(当月・前月・翌月)

    2016.08.02
  4. [Vim] Vimを10倍かっこよく使いこなすためのコマンド集

    2016.05.12
  5. [Linux] シェルスクリプトでフォルダ単位圧縮バックアップ & ロ…

    2018.01.09
  6. [Excel] 効率を大幅に上げる便利な関数使い方一覧

    2017.01.06

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


New Article

  1. sangokutenbu_toronazonazo
  2. sangokutenbu_nikyo
  3. sangokutenbu_ranking
  4. sangokutenbu_bunou
  5. gintama
PAGE TOP