アマゾンプライムデー開催中!6/22まで 

jQueryプラグイン validationEngineで好きな位置にエラーを表示する

jQueryのプラグインjQuery-Validation-Engineの好きな位置にエラーを表示する方法です。

ダウンロード&ドキュメント

カスタマイズ

表示位置を変更する

表示したい要素にidを指定し、その内容をinputdata-prompt-targetにも指定します。


<div class="error-message" id="error-name"></div>
<input type="text" name="name" class="validate[required]"  data-prompt-target="error-name">

動的に表示位置を生成する

表示位置の変更方法は分かりましたが、一つ一つ表示したい要素を書くのはとても大変です。
そこで、項目の数だけ表示位置を自動生成するコードを書きます。

Javascript

See the Pen
jQuery validationEngine
by kura (@kuranopen)
on CodePen.

HTML

See the Pen
jQuery validationEngine
by kura (@kuranopen)
on CodePen.

新しいルール(正規表現)を追加する

jquery.validationEngine-ja.jsに新しいルールを追加します。

  • 標準のファイルだと155行目から追加します。

"ajaxNameCall": {
    // remote json service location
    "url": "ajaxValidateFieldName",
    // error
    "alertText": "* This name is already taken",
    // if you provide an "alertTextOk", it will show as a green prompt when the field validates
    "alertTextOk": "* This name is available",
    // speaks by itself
    "alertTextLoad": "* Validating, please wait"
},
"validate2fields": {
    "alertText": "* 『HELLO』と入力してください"
},
// ▼ ここを追加 ▲
"kana": {
     // credit: jquery.h5validate.js / orefalo
    "regex": /^([ァ-ン]|ー)+$/,
    "alertText": "* カタカナで入力してください"
}
// ▲ ここまで ▲

【開催中】お得情報

  • このエントリーをはてなブックマークに追加