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

Try the suggestion in the link. It might work for what you're trying to achieve. http://stackoverflow.com/questions/651700/how-to-have-jquery-restrict-file-types-on-upload — Nej Kutcharian, Mar 10 '13 at 11:25
I used this `$("#up-form").bind("submit", function() { var ext = $('#uploadedfile').val().split('.').pop().toLowerCase(); if($.inArray(ext, ['pdf']) == -1) { alert('invalid extension!'); } });` when i try to upload an other file than pdf, it show me the alert but it upload the file — WilliamD., Mar 10 '13 at 11:34
you've done nothing to connect the 2 plugins. docs for both have examples for working together. Without recognizing validation, form plugin will submit regardless of it — charlietfl, Mar 10 '13 at 12:00
@charlietfl : how can i do that ? sorry for asking this but i'm starting in javascript/jquery — WilliamD., Mar 10 '13 at 12:13
look at examples for both plugins in their docs... suggest using `submitHandler` option within validation plugin to call the form plugin — charlietfl, Mar 10 '13 at 12:16
I think i'm not so far with this : [http://jsfiddle.net/Y47Yp/](http://jsfiddle.net/Y47Yp/) Except that i'm redirect to form action url, even if i try to upload not pdf files — WilliamD., Mar 10 '13 at 13:52
You have't even included the plugins in your jsFiddle. See the "External Resources" panel on the left. — Sparky, Mar 10 '13 at 15:38
There is no such callback named `beforeSend` for the `ajaxForm` plugin. I think you meant `beforeSubmit`. See: http://www.malsup.com/jquery/form/#options-object — Sparky, Mar 10 '13 at 17:15

score 1 · Answer 1 · answered Oct 23 '15 at 07:05

1

try in rules

extension: "pdf"

don't forget to call

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

answered Oct 23 '15 at 07:05

eric martinez

11
1

score 0 · Accepted Answer · edited May 23 '17 at 11:58

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

});

jQuery validation extension upload file type

2 Answers2