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.
required: false it returns a a.validator.methods[d] is undefined error. It's not required to add a file to in my form.
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>
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?
required. But can you do the client-side validation on before submit? You also need to do validation on the server-side though..submit()so you can validate before submitting.