Loading

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


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" />

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にすることもできちゃうので、下記のようなサーバサイドでのチェックも忘れずに追加しておきましょう!

jQuery関連記事

jQueryのその他記事もまとめてますので、是非お立ち寄りください(。・ω・。)

ふぇにば|PhoEniBiR

投稿者プロフィール

わくわくしてて偉い系VTuver ふぇにば です。
少しでもお役に立てておりましたら嬉しいです(。・ω・。)

関連記事

  1. [PHP] ショートカット(短縮)URL取得 with Google短縮URL …

    2016.05.09
  2. 『Excel VBA』マクロで対象ブックの印刷総枚数を取得する

    2016.06.21
  3. 『Excel VBA』マクロで辞書オブジェクト(KEY-VALUE)の使い方まと…

    2016.09.01
  4. [jQuery] formのアクションを変更する〜フォーム送信時(Submit時…

    2018.08.10
  5. [jQuery] パフォーマンス向上のコツ(処理速度向上・高速化 あれこれ)

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

    2017.01.06

コメント

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

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

CAPTCHA


New Article

  1. ChatGPTで遊ぶ おもしろい使い方まとめ
  2. ドラクエウォーク スロット どっちがいい
  3. 三國志真戦 戦法中国語翻訳
  4. ドラクエウォーク 2023年装備ガチャ
  5. ドラクエウォーク 覚醒千里行
PAGE TOP