Javascript(jQuery)で行う入力フォームチェック

Javascript で 入力フォームチェック

入力フォームの内容チェックにはいろんな方法があるが、今回はJavascriptjQuery)で送信時に行う方法を紹介する。

ポイント

以下のポイントを押さえたチェック処理を作ってみる。

  • フォームの内容に関わらず汎用的に使えること
  • 導入が簡単なこと
  • 必須チェック・メールアドレスチェックが行えること
  • 入力誤りがユーザーに分かること

デモ

下記リンク先から動きを確認できます。

Javascriptで行う入力フォームチェック(デモ)

ソースコード

Javascript(formcheck.js)

jQuery(function($) {
  // 汎用フォームエラーチェック
  $('form input[type="submit"]').click(function() {
    var msg = "";
    var email = document.getElementsByName("email");
    var error_msg_node = document.getElementById("errorMsg");

    // 必須項目がすべて埋まっているかチェック
    $('.required').each(function(i, tag) {
      if($(tag).val() == "") {
        msg = "入力されていない項目があります。";
        $(tag).css('border','1px solid #F00');
      } else {
        $(tag).removeAttr('style');
      }
    });

    // メールアドレスチェック
    if (msg == "" && email[0].value !== "") {
      if (!email[0].value.match(/.+@.+\..+/)) {
        msg = "メールアドレスが正しいかご確認ください。";
      }

      if (email[0].value.match(/,/)) {
        msg = "メールアドレスが正しいかご確認ください。";
      }
    }

    // エラーメッセージ表示 or フォーム送信
    if (msg !== "") {
      error_msg_node.innerHTML = msg;
      return false;
    } else {
      error_msg_node.innerHTML = "";
    }
  });
});

HTML

<html>
<head>
:
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="formcheck.js"></script>
:
</head>
<body>
  <form>
    <p>必須:<input type="text" name="hissu" class="required"></p>
    <p>任意:<input type="text" name="ninni"></p>
    <p>メール:<input type="text" name="email"></p>
    <p><input type="submit"></p>
  </form>
  <div id="errorMsg"></div>
</body>
<html>

使い方

HTMLコーディング時のルールは以下の通り。(上記ソースコードの場合)

  • 必須項目には“required”クラスを指定する
  • メールアドレスの部品名には“email”を指定する
  • エラーメッセージ用に“errorMsg”IDを指定した箱を用意しておく

後はjQueryと上記jsファイルを読み込むだけ。

jQueryのダウンロードは、下記から行える。
https://jquery.com

投稿者: Output48

中学生の時に初めてHTMLに触れてからホームページ制作を独学で始める。 ベンチャー企業の営業、大手企業のPG・SEを経て、独立。 現在はとある企業のCTOと、変な名前の会社の社長をしてる。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください