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": "* カタカナで入力してください"
}
// ▲ ここまで ▲

ファイルの拡張子をチェックする

  • type="file"を添付されたファイルの拡張子が指定のものになっているかチェックします。
  • 指定のものになっていればOK、なっていなければNGという処理を加えます。

    対象ファイル

     jquery.validationEngine-ja.js

    実装コード

    $.validationEngineLanguage.allRules = {}内、155行目に以下のコードを追加します。

    "validateMIME":  {
        "func": function(field, rules, i, options){
        var fileInput = field[0].files[0];
        var MimeFilter;
    
        $.each(rules, function(index, value){
            if( value == 'validateMIME' ){
                MimeFilter = new RegExp(rules[index+1],'i');
                console.log(rules[index+1]);
            }
        })
        if (fileInput) {
            return MimeFilter.test(fileInput.type);
        } else { return true;}
      },
    "alertText": "ファイルの拡張子が正しくありません"
    

    参考)stackoverflowの記事を参考に必須でない場合でも動作するようにいたしました。

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

プロフィール

kura

WEBで食べていきたいデザイナーです。 趣味でアプリ開発(ペア、デザイン担当)やNuxt.jsやらをいじってますが、やばいな~と感じつつネットの波に取り残されないようにワカッタこと、キヅイタことをカキカキします。