リアルタイムエラーチェック「jQuery-Validation-Engine.js」の使い方とカスタイズ方法
シェア
ツイート
最終更新日：
フォームをリアルタイムでチェックしてくれる便利なjQueryプラグイン
jQueryValidationEngine
の使い方をご紹介します。
jQueryValidationEngineの読み込み
まず、プラグインを読み込みます。
CDNで読み込む
CDNで読み込む場合
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/validationEngine.jquery.min.css' type='text/css' media='all' /> <script type='text/javascript' src='js/jquery-3.4.1.min.js'></script>//jQuery本体 <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/jquery.validationEngine.min.js'></script> <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/languages/jquery.validationEngine-ja.min.js'></script>
のように読み込みます。
https://cdnjs.com/libraries/jQuery-Validation-Engine
↑最新ファイルはこちらから必要なファイルを読み込むことが可能です。
直接読み込む
直接読み込む場合は
GitHub
からvalidationEngineのzipファイルをダウンロードし、解凍します。
解凍したフォルダの中から下記のcss、jsファイルを読み込みます。
<link rel='stylesheet' href='css/validationEngine.jquery.min.css' type='text/css' media='all' /> <script type='text/javascript' src='js/jquery-3.4.1.min.js'></script>//jQuery本体 <script type='text/javascript' src='js/jquery.validationEngine.min.js'></script> <script type='text/javascript' src='js/languages/jquery.validationEngine-ja.min.js'></script>
読み込みが完了できましたら、次は使い方をご紹介します。
基本の使い方
validationEngineを有効化するには
<script>
$(function(){
$("form").validationEngine();
});
</script>
のように記載します。
エラーメッセージを任意の位置に指定
data-prompt-target 属性でエラーメッセージの出力先を任意の位置に指定できます。
<input type="text" class="validate[required]" name="お名前" data-prompt-target="prompt1" /> <div class="error-message" id="prompt1"></div>
エラーメッセージの文章を自由に指定
エラーメッセージの文章を変更するには
data-errormessageまたはdata-errormessage-●●属性を指定することで可能です。
| 属性 | 対象 |
|---|---|
| data-errormessage | all |
| data-errormessage-value-missing | required groupRequired condRequired |
| data-errormessage-type-mismatch | past future dateRange dateTimeRange |
| data-errormessage-pattern-mismatch | creditCard equals |
| data-errormessage-range-underflow | minSize min minCheckbox |
| data-errormessage-range-overflow | maxSize max maxCheckbox |
| data-errormessage-custom-error | custom ajax funcCall |
使い方は
<input type="text" class="validate[required]" name="お名前" data-errormessage="お名前は必須項目です" />
のように指定します。
JavaScriptのおすすめ参考書
ポチップ
ポチップ
