【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	候補地検証(入力値が候補リストのいずれかに合致するかをチェック)