jQuery Validate File Upload

I am trying to validate a HTML file upload using jQuery Validate

I found I can use the meta option like:

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

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

But it does not appear to work. I need to add the required class anyways. Then the file type check will not work too of course. Do I need to do something additional?

Answers


If you want to use jQuery's validate to check the size of the file, you can do so by doing the following :

1- load the additional methods file

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

2- add a custom method to validate the file size

$.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- use the newly added method as a validation rule to validate your input:

$('#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" }
});

Note: using the "accept" validation rule instead of "extension" result in MIME type error messages when you upload a file with a blank file type.


You can add a validation method to accomplish

    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");

And Use it like this -

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

I hope this will help you..


Have you read and tried it this way: http://docs.jquery.com/Plugins/Validation/Methods/accept#extension ?

I mean rather than adding the validate rules to the class have you tried to just instantly add them in validate init?


Need Your Help

Interacting with C++ classes from Swift

c++ swift

I have a significant library of classes written in C++. I'm trying to make use of them through some type of bridge within Swift rather than rewrite them as Swift code. The primary motivation is t...

PHP regular expression for strong password validation

php regex validation passwords

I've seen the following regular expression around the web.