web-dev-qa-db-ja.com

jQuery Validate File Upload

JQuery Validateを使用してHTMLファイルのアップロードを検証しようとしています

次のようなメタオプションを使用できることがわかりました。

$("#myform").validate({
   meta: "validate"
})

<input type="file" name="upload" class="{validate:{required:true,accept:'docx?|pdf'}}" />

しかし、機能していないようです。とにかくrequiredクラスを追加する必要があります。その場合、ファイルタイプのチェックはもちろん機能しません。さらに何かする必要がありますか？

jqueryjquery-validate
27
JM at Work

JQueryのvalidateを使用してファイルのsizeを確認する場合は、次の手順を実行して確認できます。

1-追加のメソッドファイルを読み込む

<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>

2-ファイルサイズを検証するカスタムメソッドを追加する

$.validator.addMethod('filesize', function(value, element, param) {
    // param = size (in bytes) 
    // element = element to validate (<input>)
    // value = value of the element (file name)
    return this.optional(element) || (element.files[0].size <= param) 
});

3-新しく追加されたメソッドを検証ルールとして使用して、入力を検証します。

$('#formid').validate({
    rules: { inputimage: { required: true, extension: "png|jpe?g|gif", filesize: 1048576  }},
    messages: { inputimage: "File must be JPG, GIF or PNG, less than 1MB" }
});

注：「拡張子」ではなく「受け入れ」検証ルールを使用すると、空のファイルタイプのファイルをアップロードするときにMIMEタイプのエラーメッセージが表示されます。

65
Naoise Golden

検証メソッドを追加して達成できます

    jQuery.validator.addMethod("uploadFile", function (val, element) {

          var size = element.files[0].size;
            console.log(size);

           if (size > 1048576)// checks the file more than 1 MB
           {
               console.log("returning false");
                return false;
           } else {
               console.log("returning true");
               return true;
           }

      }, "File type error");

そして、このように使用します-

      $(document).ready(function(){
              $('#quote_form').validate({
      rules: {
           image: {
              required: true,
              extension:'jpe?g,png',
              uploadFile:true,
              }
             }
          });
       });

これがお役に立てば幸いです。

9
PHPCoder

次のように読んで試してみました： http://docs.jquery.com/Plugins/Validation/Methods/accept#extension ？

つまり、クラスに検証ルールを追加するのではなく、検証initですぐにルールを追加しようとしましたか？

2
Pehmolelu