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?
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?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With