jQueryバリデーションの基本と実装例

システム開発
スポンサーリンク
スポンサーリンク

フォーム入力時のバリデーション、うまく機能していますか？

ASP.NET MVCなどで自動生成されたHTMLには、data-val属性によるバリデーションが仕込まれており、jQuery Validationライブラリと組み合わせることで、柔軟かつ実用的な入力チェックが可能になります。この記事では、HTML属性ベースでのバリデーション定義の読み解き方から、必要なライブラリ構成、独自ルールの追加方法まで、実例を交えてわかりやすく解説します。

jQueryバリデーションの基本構造とは？

フォーム入力チェックを正しく実装するためには、まず「jQuery Validation」と「Unobtrusive Validation」の仕組みを理解する必要があります。ASP.NET MVCやASP.NET CoreのRazorページでは、モデルに付与したアノテーション属性がHTMLに変換され、data-val系の属性として埋め込まれます。これをjQuery Validationが解釈し、クライアント側でバリデーションを実行する流れです。

jQuery Validationの仕組み

✅ ASP.NET MVCの例

<input type="text"
  name="viewSagyoModelOther[0].saSyoyoTim"
  id="saSyoyoTim0"
  class="form-control text-right"
  data-index="0"
  data-val="true"
  data-val-required="所要時間(分)は必須項目です。"
  data-val-number="所要時間(分)が数値ではありません。"
/>

ここで使われている主な属性は次の通りです。

  • data-val="true" … バリデーション対象であることを示します。
  • data-val-required … 未入力のときに表示されるエラーメッセージを定義します。
  • data-val-number … 数値でなければならないことを指定します。

このように、HTMLの入力要素に「ルール」と「メッセージ」を仕込んでおくことで、JavaScriptコードを直接書かなくても自動的にバリデーションが働きます。

Unobtrusive Validationとの関係

ASP.NETで利用される「Unobtrusive Validation」は、HTML上にスクリプトをベタ書きせず、データ属性を通じて宣言的にルールを適用するアプローチです。jQuery Validationと連携し、フォーム送信時に自動でチェックが実行されます。

ポイント

  • バリデーションの定義はモデルに付与したアノテーションから自動生成される
  • jQuery Validationライブラリがdata-val属性を解釈して処理を行う
  • フロントエンド開発者は複雑なJavaScriptを書かなくても利用可能

必要なライブラリと読み込み順

正しく動作させるためには、ライブラリの依存関係を理解し、正しい順序で読み込むことが重要です。ここを誤ると、フォーム送信時にバリデーションがまったく効かないといった問題が発生します。

読み込みが必要なライブラリ

✅ 基本構成

<script src="<https://code.jquery.com/jquery-3.7.1.min.js>"></script>
<script src="<https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js>"></script>
<script src="<https://cdn.jsdelivr.net/npm/jquery-validation-unobtrusive@3.2.12/dist/jquery.validate.unobtrusive.min.js>"></script>

読み込み順のポイント

  1. jQuery本体 … jQuery ValidationはjQueryに依存しているため、必ず最初に読み込みます。
  2. jQuery Validation本体 … 入力チェックの基盤を提供するライブラリです。
  3. Unobtrusive Validation … data-val属性を解釈し、jQuery Validationのルールに橋渡しします。

この順序を守らないと「$.validator is not a function」などのエラーが出るため注意が必要です。

ASP.NET環境での注意点

ASP.NET MVCやCoreでは、既定のプロジェクトテンプレートにこれらのライブラリが組み込まれている場合があります。ただし、CDNを利用する場合やバージョンを最新化したい場合は、自分で参照順を調整する必要があります。

実装例：バリデーション付きフォーム構造

実際に、バリデーションが機能するフォーム構造を見てみましょう。ここでは、ASP.NET MVCの出力をベースにしていますが、手書きのHTMLでも同様に動作します。

フォームの例

✅ ASP.NET MVCの例

<form id="myForm">
  <input type="text"
    name="viewSagyoModelOther[0].saSyoyoTim"
    id="saSyoyoTim0"
    class="form-control text-right"
    data-index="0"
    data-val="true"
    data-val-required="所要時間(分)は必須項目です。"
    data-val-number="所要時間(分)が数値ではありません。"
  />
  <span class="field-validation-valid text-danger"
        data-valmsg-for="viewSagyoModelOther[0].saSyoyoTim"
        data-valmsg-replace="true"></span>

  <button type="submit">送信</button>
</form>

ここで注目すべきは、<span>タグの存在です。

  • data-valmsg-for … どの入力要素に対応するエラーメッセージなのかを指定します。
  • data-valmsg-replace … trueならメッセージを置き換え、falseなら追加表示します。

実際の動作

  1. 未入力で送信すると「所要時間(分)は必須項目です。」が表示される
  2. 文字列を入力して送信すると「所要時間(分)が数値ではありません。」が表示される
  3. 正しい数値を入れるとエラーメッセージが消え、送信が可能になる

これにより、ユーザーにわかりやすいエラーフィードバックを提供できます。

カスタムバリデーションの追加方法

業務システムでは、標準ルール（必須・数値・メール形式など）だけでは対応できないケースが多々あります。その際には、独自ルールを定義してバリデーションに組み込むことができます。

カスタムルールの例

✅ jQueryの例

$.validator.addMethod("rangeCustom", function (value, element) {
  return this.optional(element) || (value >= 1 && value <= 60);
}, "所要時間(分)は1～60の間で入力してください。");

$("input[name^='viewSagyoModelOther']").rules("add", {
  rangeCustom: true
});

このコードでは、以下のことをしています。

  • $.validator.addMethod … 新しいバリデーションメソッドを定義
  • this.optional(element) … 入力が空の場合は無視（必須チェックと組み合わせ可能）
  • rules("add", { ... }) … 既存の要素にカスタムルールを適用

実務での応用例

  • 郵便番号の桁数チェック（7桁固定）
  • 日付のフォーマット検証（YYYY/MM/DD形式）
  • 業務固有のコード体系（例：製品コードが「P-xxxx」形式かどうか）

このように、柔軟にバリデーションを拡張できるのがjQuery Validationの大きな利点です。

ModelのDataAnnotationsとの関係

ASP.NET MVCでは、ModelにDataAnnotationsを付与することでサーバーサイドのバリデーションが定義できます。

✅ C# MVCの例（Model定義）

public class TaskViewModel
{
    [Required(ErrorMessage = "所要時間(分)は必須項目です。")]
    [Range(1, 60, ErrorMessage = "所要時間(分)は1～60の間で入力してください。")]
    public int SaSyoyoTim { get; set; }
}

これをRazorビューにレンダリングすると、次のようにdata-val属性が自動生成されます。

<input type="text"
       id="SaSyoyoTim"
       name="SaSyoyoTim"
       data-val="true"
       data-val-required="所要時間(分)は必須項目です。"
       data-val-range="所要時間(分)は1～60の間で入力してください。"
       data-val-range-min="1"
       data-val-range-max="60" />

競合は起きるか？

  • 基本的に競合しない

    モデルに付与したアノテーションは、そのままクライアント側のdata-val属性として展開されます。結果として、jQuery Validationが自動的に解釈して動作します。

  • 役割分担

    クライアント側は即時の入力補助、サーバー側は改ざん防止の最終チェックという役割分担で動作します。

  • 注意点

    jQueryで独自ルールを追加した場合、それをサーバー側にも実装しないと「フロントでは弾かれるが、サーバーでは通ってしまう」状態になりかねません。業務システムでは、必ず両側で同じルールを維持することが推奨されます。

jQuery Validationを使う際の注意点

最後に、実務で利用する際に気をつけるべきポイントを整理します。

  • .validate()や.valid()の使い分け

    Unobtrusive Validationでは自動的にフォームにバリデーションが適用されますが、jQuery単独で使う場合は明示的に.validate()を呼び出す必要があります。

  • SPAとの相性問題

    VueやReactなどのフレームワークでは、仮想DOMによって要素が動的に生成されるため、jQueryのセレクタバインディングが期待通りに動かないことがあります。その場合は専用のバリデーションライブラリを検討する方が望ましいです。

  • サーバーサイドでの再チェック

    JavaScriptを無効化した場合や、悪意あるリクエストを直接送信した場合にはクライアントサイドバリデーションは機能しません。必ずサーバー側でも同等のチェックを実装してください。

まとめ

この記事では、jQuery Validationを使ったフォーム入力チェックの基本と実装例を解説しました。ASP.NET MVCが出力するdata-val属性とUnobtrusive Validationを利用すれば、宣言的にバリデーションを定義でき、柔軟かつ拡張性の高い仕組みを構築できます。

押さえておくべきポイントは以下の通りです：

  • data-val属性によりHTML上にルールを宣言できる
  • 必要なライブラリは jQuery → jQuery Validation → Unobtrusive Validation の順で読み込む
  • <span>タグを使ってエラーメッセージを適切に表示する
  • カスタムルールを追加すれば、業務要件に合わせたチェックも可能
  • ModelのDataAnnotationsはjQuery Validationと競合せず、補完関係で動作する
  • セキュリティ確保のため、サーバー側でも同等のバリデーションを必ず実装する

jQuery Validationは今なお業務システムで広く利用されており、既存システムの保守や拡張において欠かせない技術です。基本を理解しておけば、より堅牢で使いやすいフォームを実現できるでしょう。

システム開発
jQuery
スポンサーリンク
シェアする
tobotoboをフォローする
tobotobo

コメント

タイトルとURLをコピーしました