１．ファイルをダウンロードする
２．ダウンロードしたファイルを配置する
使用するファイル
■scripts配下
・exvalidation.js
・exchecker-ja.js
※exvalidation.jsに下記を記載しておく（二重送信防止のjavaScript制御と連動）
// Double Press Prevention
form.on('submit', function(e) {
_exeValidation()
? $(this).find('button[type="submit"], input[type="submit"]').prop("disabled", true)
: $(this).find('button[type="submit"], input[type="submit"]').prop("disabled", false)
})
■styles配下
・exvalidation.css
配置する
例
３．jspで使えるようにする
※jqueryも必要
<head> ～～～ <link type="text/css" rel="stylesheet" href="/demo/resources/common/css/exvalidation.css" /> </head> <body> ～～～ <script src="/demo/resources/common/js/jquery-3.7.1.min.js"></script> <script src="/demo/resources/common/js/exvalidation.js"></script> <script src="/demo/resources/common/js/exchecker-ja.js"></script> </body>
４．ルールを定義する
<form:form modelAttribute="offerForm" method="post"> <label>ユーザーID:</label> <form:input id="userId" path="userId" value=""/><br><br><br> <label>名前:</label> <form:input id="name" path="name"/><br><br> <input type="submit" value="確認へ進む" formaction="offer_confirm"/> </form:form> <script> var validation = $("form") .exValidation({ firstValidate: true, rules: { userId: "chkrequired", name: "chkrequired", kana: "chkrequired chkkatakana", email: "chkrequired chkemail chkhankaku chkgroup", email3: "chkrequired chkemail chkhankaku", pass: "chkrequired chkmin6 chkmax12", repass: "chkrequired chkretype-pass", url: "chkrequired chkurl", radio: "chkradio", street: "chkgroupt chkrequired", checkbox: "chkcheckbox", pref: "chkselect", file: "chkfile" }, stepValidation: true }); </script>
バリデーションの種類
| ルール | エラー内容 |
|---|---|
| chkrequired | 入力してください |
| chkmax6 | 6文字以内で入力してください ※数字は可変 |
| chkmin4 | 4文字以上で入力してください ※数字は可変 |
| chkhiragana | ひらがなで入力してください |
| chkkatakana | カタカナで入力してください |
| chkfurigana | ふりがなはひらがな、全角数字と〜、ー、（）が利用できます |
| chkhankaku | 全角文字は使用できません |
| chkzenkaku | 全角文字で入力してください |
| chknochar | 英数字で入力してください |
| chknocaps | 英数字(小文字のみ)で入力してください |
| chknumonly | 半角数字のみで入力してください |
| chkzip | 正しい郵便番号の形式を入力してください |
| chkemail | 正しいメールアドレスの形式を入力してください |
| chkurl | 正しいURLの形式を入力してください |
| chktel | 正しい電話番号を入力してください |
| chkfax | 正しいファックス番号を入力してください |
| chkretype-xxx | 入力内容が異なります ※xxxにはチェック対象のidを記載 |
| chkradio | 選択してください ※ラジオボタンで使用 |
| chkselect | 選択してください ※セレクトボックスで使用 |
| chkfile | ファイルを選択してください ※input type="file"で使用 |
設定
「exvalidation.js」に動作に関係する設定が記載されている
値を変更することで動作を変更可能
| errHoverHide | エラーメッセージにカーソルを乗せると消える |
| errTipCloseBtn | エラーメッセージに閉じるボタンを表示するか |
| errTipCloseLabel | 上記で表示する場合の閉じるボタンのテキスト「×」 |
| errMsgPrefix | エラーメッセージの先頭文字 「入力してください」の「*」 |
| errTipPos | エラーの表示位置 INPUT 等エレメントに対し左右を調整 |
| scrollToErr | エラーのあった場所へスクロールするか「送信」ボタン押下時などで重宝します。 |
| customListener | どの状態でエラー判定するか 「blur」：カーソルがそこから離れた時 「keyup」：１文字でも入力したらすぐ 「change」：変化があれば（selectやcheckbox,radioなど） 「focus」：カーソルを当てたらすぐ |
