必要な環境
本記事のサンプルコードは、以下の環境で動作を確認しています。
-
macOS Sonoma（14.7）
- InputManJS（5.0）
- Visual Studio Code 1.96.4（Live Server 5.7.9）
- Google Chrome 132.0
対象読者
- 入力フォームに高度なコントロールを実装したい方
- 入力フォームの検証をより高度に実施したい方
- InputManJSの最新機能を知りたい方
開発環境と事前準備
最初に、検証機能の概要を理解し、開発環境と必要なファイルを準備しておきます。
検証機能の概要
InputManJSは、リッチテキスト、テキスト、マスク、日付時刻、数値、コンボなど、用途別に最適化された日本仕様の入力用JavaScriptコントロールのセットです。高度にカスタマイズされたコントロールを使うことで、リッチな入力フォームを簡単に構築できます。また、高機能な検証コントロールが用意されており、HTML標準の検証機能をはるかに超えた高度な検証を、サーバサイドの実装なしに実現できます。
検証規則には、以下の表1に挙げるものがあります（以下表内の*はV5Jで使えるようになった機能）。
| 規則 | 概要 |
|---|---|
| 入力必須 | コントロールへの入力を必須とする |
| 入力範囲 | 数値や日付の範囲を制限する |
| 入力文字数* | コントロールに入力できる文字数を制限する |
| 他のコントロールとの照合* | 他のコントロールと同値かチェックする |
| 外部検証結果の指定* | 検証コントロール外部の検証コードの評価に委ねる |
| カスタム検証規則 | 検証規則をユーザ定義の関数によって定義する |
本記事では、これらの新機能を中心に、InputManJSの検証機能を紹介していきます。
開発環境
開発環境としては、VSCode（Visual Studio Code）をインストールしておきます。そのあと、VSCodeにHTTPサーバを提供する拡張機能Live Serverをインストールします。本記事のサンプルではHTTPサーバは必須ではありませんが、ホットリロードなどが利用できるので、インストールしておくと便利です。
サンプルフォームの準備
本記事のサンプルは、HTML、CSS、JavaScriptのファイルからなるシンプルな構成なので、適当な作業フォルダを作成してそこにファイルを配置していきます。まずは、index.htmlファイルを、以下のリストの内容で作業フォルダに作成します。InputManJSを利用するにはいくつかの方法がありますが、本記事ではCDN（Content Delivery Network）から直接取り込む簡便な方法を利用します。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdn.mescius.com/inputmanjs/hosted/css/gc.inputman-js.css" /> (1) <script src="https://cdn.mescius.com/inputmanjs/hosted/scripts/gc.inputman-js.ja.js"></script> (1) <link rel="stylesheet" href="https://cdn.mescius.com/inputmanjs/hosted/richtexteditor/css/gc.inputman.richtexteditor.css" /> (2) <script src="https://cdn.mescius.com/inputmanjs/hosted/richtexteditor/scripts/gc.inputman.richtexteditor.ja.js"></script> (2) <link rel="stylesheet" href="style.css" /> (3) <title>InputManJSサンプル</title> </head> <body> <h1>InputManJSサンプル</h1> <label>お名前（必須）：<input id="customerName"></label> (4) <label>ご年齢：<input id="customerAge"></label> <label>ご購入日：<input id="purchasedDate"></label> <label>お問い合わせ内容：<textarea id="queryContent"></textarea></label> <label>電話番号：<input id="customerTel"></label> <label>メールアドレス：<input id="emailAddress"></label> <label>メールアドレス（確認用）：<input id="emailAddressConfirm"></label> <label><button type="button">送信する</button></label> <script src="script.js"></script> (3) </body> </html>
（1）はInputManJSのCDNからの読み込み、（2）はリッチテキストエディタ機能のCDNからの読み込みです。（3）はサンプルCSSとJavaScriptコードの読み込みです。（4）以降で、検証規則を実装するコントロールをいくつか置いておきます（button要素を除く）。各コントロールは、input要素にid属性のみ指定したもので、細かな指定はJavaScriptコードから行います。また、V5Jよりリッチテキストエディタコントロールに対しても検証機能を使用できるようになったので、「お問い合わせ内容」の項目に実装しています。こちらはtextarea要素として定義します。
CSSファイルは、空きやレイアウト方法の指定です。具体的な内容は配布サンプルを参照してください。JavaScriptファイルには、フォームの初期表示となる以下のコードを記述します。基本的に、コントロールのインスタンスをid属性から生成するようになっています。プロパティなどの意味はコメントを参照してください。
// 名前入力欄
const customerName = new GC.InputMan.GcTextBox(document.getElementById('customerName'));
// 年齢入力欄
const customerAge = new GC.InputMan.GcNumber(document.getElementById('customerAge'), {
value: 20, // 初期値
minValue: 0, // 最小値
maxValue: 120, // 最大値
maxMinBehavior: GC.InputMan.MaxMinBehavior.Keep, // 範囲外の値の入力時には現在値を保持
displayPositiveSuffix: ' 歳',
showSpinButton: true,
});
// 購入日入力欄
const purchasedDate = new GC.InputMan.GcDateTime(document.getElementById('purchasedDate'), {
displayFormatPattern: 'yyyy年M月d日', // 日付の表示フォーマット
formatPattern: 'yyyy年M月d日', // 日付の入力フォーマット
value: new Date(2025, 0, 1), // 初期値
minDate: new Date(2024, 0, 1), // 最小値
maxDate: new Date(2025, 11, 31), // 最大値
maxMinBehavior: GC.InputMan.MaxMinBehavior.Keep, // 上と同様
showDropDownButton: true,
dropDownConfig: {
dropDownType: GC.InputMan.DateDropDownType.Calendar,
minDate: new Date(2024, 0, 1),
maxDate: new Date(2025, 11, 31),
},
});
// 問い合わせ内容入力欄
const queryContent = new GC.InputMan.GcRichTextEditor(document.getElementById("queryContent"), {
plugins: [GC.InputMan.GcRichTextEditorPluginItem.All], // 全プラグイン
width: 600, // コントロールの幅
height: 200, // コントロールの高さ
});
// 電話番号入力欄
const customerTel = new GC.InputMan.GcMask(document.getElementById('customerTel'), {
formatPattern: '℡ \\D{2,4}-\\D{2,4}-\\D{4}'
});
// メールアドレス入力欄
const emailAddress = new GC.InputMan.GcTextBox(document.getElementById('emailAddress'));
const emailAddressConfirm = new GC.InputMan.GcTextBox(document.getElementById('emailAddressConfirm'));
index.htmlファイルをブラウザで開いて、図1のように表示されれば準備完了です。
