File upload problem in jQuery validate plugin

Question

I have a form that uses jQuery.validate.js plugin to validate and submit a form. The form contains a file upload.

I want to submit and upload the image with the validate.js but When I submit the form with the selected image, nothing happens. I've searched for solution, but the ones I got did not solve the problem.

    // **EDIT**
    // Add method to check imagesize
    $.validator.addMethod("imageSize",function(value, element, param) {
        return this.optional(element) || (element.files[0].size <= param);
    }, "This fileld is required.");
    // END: **EDIT**

var addNewsForm, format;
    addNewsForm = $("#newsPanel");
    format = ['png','jpe?g','gif'];

    addNewsForm.on("submit", function(e) {
        e.preventDefault();

        //validate form
        $(this).validate({
            errorClass : "error",
            rules : {
                 news_image : {
                    required : true,
                    imageSize: 5242880,
                    accept : format
                 }
            },

         messages : {
             news_image : {
                required : "Please select an image for the news.",
                imageSize : "Image size should not be greater than 5MB.",
                accept : "Unsupported image format"
         },

         submitHandler : function(form) {
              sendData = {
                  news_image : $("#newsImage")
              }; // end of sendData

         $(form).ajaxSubmit({
             type : "POST",
             data : sendData,
             url : "action_news.php",
             success : function(getData) {
                   $("#pageMsg").html(getData);
             }
         }); // end of ajaxSubmit
    }, // end of submitHandler
}); // end of document ready

 <form method="get" id="newsPanel" enctype="multipart/form-data">
     <div id="pageMsg"></div>
     <input type="file" id="newsImage" name="news_image" size="40" id="newsImage">
 </form>

Any better way of achieving this?

Answer 1

You're missing a closing } for your messages object, right now the submitHandler is inside the messages object.

You're also missing a }) to close this function addNewsForm.on("submit", function (e) { .

Try using the code below and see if it works.

addNewsForm.on("submit", function (e) {
    e.preventDefault();

    //validate form
    $(this).validate({
        errorClass: "error",
        rules: {
            news_image: {
                required: true,
                imageSize: 5242880,
                accept: format
            }
        },
        messages: {
            news_image: {
                required: "Please select an image for the news.",
                imageSize: "Image size should not be greater than 5MB.",
                accept: "Unsupported image format"
            },
        },
        submitHandler: function (form) {
            sendData = {
                news_image: $("#newsImage")
            }; // end of sendData

            $(form).ajaxSubmit({
                type: "POST",
                data: sendData,
                url: "action_news.php",
                success: function (getData) {
                    $("#pageMsg").html(getData);
                }
            }); // end of ajaxSubmit
        }, // end of submitHandler

        }); // end of document ready

    })