file input field validation

Question

I tried this, Its not working.

I want to do following things:

While clicking on submit button the profilePic should be validate. profilePic must not be null and it must accept only one of the

gif|png|jpg|jpeg|pjpeg

file.

I also want to add maximum size for uploading.

 $("#basicprofile").bind("submit", function() {
            $("#profilePic").validate({
                rules: {
                    field: {
                        required: true,
                        accept: "gif|png|jpg|jpeg|pjpeg"
                    }
                }
            });
        });


 <s:form action="basicprofile" method="post" enctype="multipart/form-data" 
  id="basicprofile">
       <s:file name="profilePic"  id="profilePic" label="Profile Picture" />
       <s:submit />
 </s:form>

Answer 1

$(document).ready(function() {

    $("#basicprofile").validate({
        rules: {
            profilePic: {
                required: true,
                accept: "gif|png|jpg|jpeg|pjpeg"                
            }
        },

        messages: {
            profilePic: {
                required: "Empty file",
                accept: "Wrong format!!"
            }                  
        },

        errorPlacement: function(error, element) {
            $("#error-messages").html(error); // error container
        }

    });

});

You can check that the field is Filled and file have correct format in browser, but check filessize is hard problem. You have to do it with AJAX, and use the filesize headers sent by the browser to the server on the POST request.

Yahoo's UI Library has a tool to help with this. YUI Uploader

Example (without check file size): http://jsfiddle.net/burlak/U36JS/

Answer 2

You have to validate the form, not the field. I believe it has to be something like:

$("#basicprofile").validate({
    rules: {
        profilePic: {
            required: true,
            accept: "gif|png|jpg|jpeg|pjpeg"
        }
    }
});