jquery.validationEngine-ja.js 添付ファイルチェック

Question

実現したいこと

jquery.validationEngine.jsを使って、メールフォームチェックしていますが、カスタマイズして、添付ファイルのファイル形式とサイズを制限したいです。

発生している問題

ファイル形式の制限なんとかできましたが、サイズの制限はできません。

メールフォーム

<input type="file" class="validate[attachment[pdf]" id="attachment" name="attachment[]">

jquery.validationEngine.jsカスタマイズ部分

case "attachment":
errorMsg = methods._getErrorMessage(form, field, rules[i], rules, i, options, methods._attachment);
break;

_attachment: function (field, rules, i, options) {
var uploadedFile = $(field);
if (uploadedFile) {
var extensions = rules[i + 1];
var mimeFilter = new RegExp(extensions);
if (!mimeFilter.test($(uploadedFile).val().split('.').reverse()[0])) {
return options.allrules.attachment.alertText;
}
}
else {
return true;
}
},

jquery.validationEngine-ja.jsカスタマイズ部分

"attachment": {
regex": "none",
"alertText": "* 画像形式が違います"
},

補足情報

上のコードにファイルサイズの制限追加したいですが、うまく行きません。追加するなら、書き方を変えたほうがいいのか。
javascriptを完全に理解していないところもあり、カスタマイズすると、手こずってしまいます。
すみません、詳しい方いらっしゃいましたら、教えてください。

Answer 1

ファイルサイズは size プロパティを見ればわかります。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input/file#Getting_information_on_selected_files

拡張子もサイズも custom および funcCall で対応できるため、プラグインを直接書き換えるのはおすすめしません。

<input type="file" class="validate[custom[pngfile],funcCall[fileSizeValidation[1024]]" id="attachment" name="attachment[]" />

function fileSizeValidation(field, rules, i, options) {
  const max = parseInt(rules[i + 2], 10);
  const files = field[0].files;
  if (files.length && Array.from(files).some(f => f.size > max)) {
    return '* ファイルサイズが大きすぎます';
  }
}

  $.validationEngineLanguage.allRules.pngfile = {
    "regex": /^.+.png$/i,
    "alertText": "* 画像形式が違います"
  };

http://posabsolute.github.io/jQuery-Validation-Engine/#customfunction_name

Comments

[zacc]

ご回答ありがとうございます。プラグインを直接書き換えないと、エラーメッセージが統一ません。違うデザインのエラーメッセージにしたくないので。