KH-WEBLOG TOP > WEBメモ > JavaScript > リアルタイムエラーチェック「jQuery-Validation-Engine.js」の使い方とカスタイズ方法

リアルタイムエラーチェック「jQuery-Validation-Engine.js」の使い方とカスタイズ方法

最終更新日:

フォームをリアルタイムでチェックしてくれる便利なjQueryプラグイン
jQueryValidationEngine
の使い方をご紹介します。

コーディング・WordPress化作業を代行します

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="お名前は必須項目です" />

のように指定します。

コーディング・WordPress化作業を代行します

JavaScriptのおすすめ参考書

楽天ブックス
¥2,838 (2024/06/07 12:15時点 | 楽天市場調べ)

TAGS

.htaccess ActionScript All in one seo pack Contact Form 7 CSS CSS3 EC-CUBE Flash HTML HTML5 JavaScript jQuery LightBox PHP RSS SEO WordPress アイキャッチ画像 アクセス解析 カスタムフィールド カテゴリー カラーミーショップ カート コメント ショートコード テンプレートタグ ドロップダウンメニュー パーマリンク フォーム フルスクリーン ブログカード プラグイン ページテンプレート ページナビ ページ分割 マウスイベント リダイレクト リンク リンクカード レンタルサーバー ロールオーバー 携帯サイト 条件分岐 正規表現 関連記事