jQueryプラグイン validationEngineエラーカスタマイズ 位置変更/拡張子
jQueryのプラグインjQuery-Validation-Engineの好きな位置にエラーを表示する方法です。
ダウンロード＆ドキュメント
カスタマイズ
表示位置を変更する
表示したい要素にidを指定し、その内容をinputのdata-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": "* カタカナで入力してください"
}
// ▲ ここまで ▲
表示するエラーを一つにする
複数エラーチェックを設けてる項目に表示されるエラーを1つにします。
$("form").validationEngine({
maxErrorsPerField: 1 //表示エラーを一つにする
});
ファイルの拡張子をチェックする
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の記事を参考に必須でない場合でも動作するようにいたしました。
分割された項目のエラー表示を一つにする
2つ目移行の項目のクラスに[condRequired[#ID]]を挿入します。
<!-- 項目の数だけエラーが表示される -->
<input type="text" name="sei" class="validate[required]">
<input type="text" name="mei" class="validate[required]">
<!-- エラー表示が一つになる -->
<input type="text" name="sei" id="sei" class="validate[required]">
<input type="text" name="mei" id="mei" class="validate[condRequired[sei]]">
