jQuery validation extension upload file type

Question

I have this to upload files and get a progress bar. I'd like to restrict the uploaded file to only pdf, unfortunately it doesn't work with JQuery validation plug-in with this :

$(document).ready(function(){

var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');

$('#up-form').validate({
 rules: {
     uploadedfile: {
         required: true,
         accept: "application/pdf",
         },
     },
 messages: {
    uploadedfile: "File must be PDF",
    },
 highlight: function(element) {
     $(element).closest('.control-group').removeClass('success').addClass('error');
 },
 success: function(element) {
 element
     .addClass('valid')
     .closest('.control-group').removeClass('error').addClass('success');
 }
});


$('form').ajaxForm({
    beforeSend: function() {


        status.empty();
        var percentVal = '0%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    uploadProgress: function(event, position, total, percentComplete) {
        var percentVal = percentComplete + '%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    complete: function(xhr) {
     bar.width("100%");
    percent.html("100%");
        status.html(xhr.responseText);
    }
}); 
})(); 

how can i fix that ? For each file i try to upload, i always have the error message "File must be PDF".

I also verify the extension on the server-side but to save bandwith, i'd like to make it also client-side

Thank you for your help

Answer 1

try in rules

extension: "pdf"

don't forget to call

<script src="jquery-validation/dist/additional-methods.min.js"></script>

Answer 2

You've misspelled beforeSubmit as beforeSend which is not a valid callback function/option for this plugin.

Then see this other answer: https://stackoverflow.com/a/15324504/594235

Basically, use the beforeSubmit callback function of the ajaxForm plugin to first programmatically check the form's validity using the Validate plugin's .valid() method.

My answer assumes that your .validate() and .ajaxForm() initialization code is otherwise correct.

Added .valid() into the beforeSubmit callback of ajaxForm() below...

$(document).ready(function () {

    var bar = $('.bar');
    var percent = $('.percent');
    var status = $('#status');

    $('#up-form').validate({
        rules: {
            uploadedfile: {
                required: true,
                accept: "application/pdf",
            },
        },
        messages: {
            uploadedfile: "File must be PDF",
        },
        highlight: function (element) {
            $(element).closest('.control-group').removeClass('success').addClass('error');
        },
        success: function (element) {
            element.addClass('valid')
                .closest('.control-group').removeClass('error').addClass('success');
        }
    });


    $('#up-form').ajaxForm({
        beforeSubmit: function () {
            status.empty();
            var percentVal = '0%';
            bar.width(percentVal)
            percent.html(percentVal);
            return $('#up-form').valid(); // TRUE when form is valid, FALSE will cancel submit
        },
        uploadProgress: function (event, position, total, percentComplete) {
            var percentVal = percentComplete + '%';
            bar.width(percentVal)
            percent.html(percentVal);
        },
        complete: function (xhr) {
            bar.width("100%");
            percent.html("100%");
            status.html(xhr.responseText);
        }
    });

});