PRO tooltip validation form
セルツールチップ — フォームバリデーション
イベント申込フォーム。必須フィールドに青いヒント、バリデーション後に赤いエラーメッセージを表示。入力・検証・エラー巡回をインタラクティブに体験。
デモの解説
このデモは ReoGrid スプレッドシート内にイベント申込フォームを描画します。青い情報ヒントと赤いエラーメッセージの 2 種類のツールチップモードを体験できます。
- 「ヒントを表示」をクリックすると必須フィールドに青いツールチップを設定。「次のツールチップ」で循環
- 「バリデーション」は各フィールドのカスタムバリデーションロジックを実行（必須チェック・メール形式・電話番号桁数）
- 入力エラーフィールドには赤いエラーツールチップが表示。最初のエラーを自動表示し、ボタンでエラー間を移動
- 有効フィールドには緑のチェックマーク、全フィールドが合格すると成功メッセージを表示
- ツールチップはセルごとにプログラムで設定 — 位置・スタイル・コンテンツはすべて API で制御
主要 API
ws.setCellTooltip(pos, options) 指定セルにツールチップをテキスト・背景色・文字色・表示モード付きで設定
ws.showCellTooltip(pos) 指定セル位置のツールチップをプログラムで表示
ws.range(ref).merge() フォームヘッダーのタイトル・サブタイトル行を全列にわたって結合
ws.cell(row, col).setStyle(style) ラベルセル（太字）・入力セル（白背景）・ステータスセルにスタイルを適用
ソースコード
TypeScript