【jQuery入門】フォームの入力検証機能を実装する

ソースコード、サンプル

<ul id="error_summary"></ul>
<form id="form">
  <div class="field">
    <label for="isbn">ISBNコード</label>：
    <input type="text" id="isbn" size="20" class="valid required regexp" data-pattern="978-4-[0-9]{2,6}-[0-9]{2,6}-[0-9X]{1}" />
  </div>
  <div class="field">
    <label for="title">書名</label>：
    <input type="text" id="title" size="30" class="valid length" data-length="30" />
  </div>
  <div class="field">
    <label for="price">価格</label>：
    <input type="text" id="price" size="5" class="valid range" data-max="10000" data-min="100" />
  </div>
  <div class="field">
    <label for="publish">出版社</label>：
    <input type="text" id="publish" class="valid inarray" data-option="翔泳社 技術評論社 秀和システム" />
  </div>
  <div class="field">
    <input type="submit" value="送信" />
  </div>
</form>

<script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>

$(function () {
  var msgs;
  var setError = function (elem, msg) {
    msgs.push("<li>" + msg + "</li>");
    $(elem).addClass("error_field").after('<span class="error_mark">*</span>');
  };

  $("#form").submit(function (e) {
    msgs = [];
    $(".error_mark", this).remove();
    $(".valid", this)
      .removeClass("error_field")
      .filter(".required")
      .each(function () {
        if ($(this).val() === "") {
          setError(this, $(this).prev("label").text() + "は必須入力です。");
        }
      })
      .end()
      .filter(".length")
      .each(function () {
        if ($(this).val().length > $(this).data("length")) {
          setError(
            this,
            $(this).prev("label").text() +
              "は" +
              $(this).data("length") +
              "文字以内で入力してください。"
          );
        }
      })
      .end()
      .filter(".range")
      .each(function () {
        var v = parseFloat($(this).val());
        if (v < $(this).data("min") || v > $(this).data("max")) {
          setError(
            this,
            $(this).prev("label").text() +
              "は" +
              $(this).data("min") +
              "～" +
              $(this).data("max") +
              "の範囲で入力してください。"
          );
        }
      })
      .end()
      .filter(".inarray")
      .each(function () {
        var opts = $(this).data("option").split(" ");
        if ($.inArray($(this).val(), opts) === -1) {
          setError(
            this,
            $(this).prev("label").text() +
              "は" +
              opts.toString() +
              "のいずれかで入力してください。"
          );
        }
      })
      .end()
      .filter(".regexp")
      .each(function () {
        var reg = new RegExp($(this).data("pattern"), "gi");
        if (!reg.test($(this).val())) {
          setError(
            this,
            $(this).prev("label").text() + "の形式が間違っています。"
          );
        }
      });

    if (msgs.length === 0) {
      $("#error_summary").css("display", "none");
    } else {
      $("#error_summary").css("display", "block").html(msgs.join(""));
      e.preventDefault();
    }
  });
});

#error_summary {
  color: #f00;
  display: none;
}

.error_field {
  background-color: #f9c;
}

.error_mark {
  coclor: #f00;
}

See the Pen
jQuery15-2 by shinjiezumi (@sezumi)
on CodePen.

入力値の検証機能を実装するための準備

適用する検証の種類はclass属性で定義する

検証名	検証内容
required	必須検証(値が入力されているかをチェック)
regexp	フォーマット検証(正規表現パターンに合致するかをチェック)
length	文字列長検証(文字列の長さが指定文字数を超えていないかをチェック)
range	数値範囲検証(数値がm〜nの範囲内かをチェック)
inarray	候補地検証(入力値が候補リストのいずれかに合致するかをチェック)

それぞれの項目に対して、どの検証機能を有効にするかは、class属性で設定する

検証に必要な情報はdata-xxx属性で表す

検証に必要なパラメータ情報はdata-xxx属性で定義する。

data-xxx属性は、目的に応じて開発者が自分で自由な値を設定できる特別な属性。

エラーメッセージを表示するための領域、スタイルを準備する

エラーメッセージを表示するための領域を、ページの先頭に<ul id="error_summary">要素として準備しておく。
配下の<li>要素は、あとから検証処理を実行したときに動的に追加する。
また、エラーメッセージに関するスタイルも設定しておく

検証機能の全体像を把握する

フォームの送信時に処理を実行

フォーム送信のタイミングで発生するのはsubmitイベントで、検証処理のイベントに対応する処理として記述する。

エラーメッセージなどをクリアする

検証処理を始める前に、まずフォームの内容をクリアする。
これは初回は問題ないが、２回以降のサブミットでエラーメッセージをクリアするため。

個別の検証処理を実行する

もともとの要素セットでは「フォーム配下のvalidクラスを持つ要素」を取り出しているが、まずfilterメソッドで特定の検証名を持つ要素だけに絞り込む。
filterは「filter(セレクター）」の構文で、現在の要素セットから条件に合致した要素だけを取り出すためのメソッド。

そのうえでeachメソッドで検証対象の要素を順にチェックしていく。
eachメソッドはjQueryオブジェクトの内容を順に処理するためのメソッド。

eachメソッドの中では、thisキーワードでここの要素にアクセスできる。
検証処理が終わったら、endメソッドで要素を元の状態に戻す。

エラーリストを表示する

検証の結果、エラーがあった場合、msgs配列にエラーメッセージをセットし、エラーがひとつでもあった場合にはエラーリストを表示したうえで、エラー情報をhtmlメソッドでセットする

検証処理本体

setErrorは、検証エラーが発生した場合にエラーメッセージを格納するための関数

各検証処理はコードの通り。