i have a file input box which is not required for validation. But if the input box is not empty then i want the validation for file type and file size to be executed.
jQuery(document).ready(function(){
jQuery.validator.addMethod("accept", function(value, element, param) {
return value.match(new RegExp("." + param + "$"));
});
jQuery.validator.addMethod('filesize', function(value, element, param) {
return this.optional(element) || (element.files[0].size <= param)
});
jQuery('#adminform').validate({
rules: {
resume: {
required: false,
accept: "(doc|docx|pdf)",
filesize: 1024 //1048576
}
},
......................
resume: {
accept: "File type not supported",
filesize: "File cannot be more than 1MB!"
},
For now the problem is that even if i don't supply any input and leave it empty, i get the rule "accept" executed i.e i get the message "File type not supported".
Try this..Not empty check ensures that if field is left blank then validation won't be performed
$('input[type="file"]').on("change", function() {
if ($this.val() !== '') {
//do validation stuff here!!
}
});
Tryout this if this helps:
$("#commentForm").validate({
rules: {
name: "required",
file: "required",
name: {
required: true,
minlength: 2
},
file: {
required: false,
minlength: 5
}
},
messages: {
name: {
required: "Please enter a username",
minlength: "Your username must consist of at least 2 characters"
},
file: {
required: "Please select a file",
minlength: "Your password must be at least 5 characters long"
}
},
submitHandler: function(form) {
if ($('#cfile').val() != "") {
$("#commentForm").validate({
rules: {
file: "required",
file: {
required: true,
minlength: 5
}
},
messages: {
file: {
required: "Please select a file"
}
}
});
$(form).submit();
} else {
alert('file missing.');
}
}
});