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>

score 1 · Accepted Answer · answered Dec 03 '12 at 14:21

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/

answered Dec 03 '12 at 14:21

Burlak Ilia

185
4

above link is working but its not working on my local system. I am using 1.8.3/jquery.min.js and I paste above code in tag – xrcwrn Dec 04 '12 at 13:03
got it not included – xrcwrn Dec 04 '12 at 13:07
is this is also need to include. why u included this. this code is also running without this script – xrcwrn Dec 04 '12 at 13:09
i have simple example and i was just paste scripts includes form this example ) – Burlak Ilia Dec 04 '12 at 13:38

Pigueiras · Answer 2 · 2012-12-03T16:09:14.303

0

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

edited Dec 03 '12 at 16:09

answered Dec 03 '12 at 14:16

Pigueiras

18,778
10
64
87

@Manish Have you looked in your favorite debugger tool for javascript if there is an error (for instance: Google Chrome Developer Tools -> Console) – Pigueiras Dec 03 '12 at 16:08
@Manish I also changed my answer, I used validation with jquery a time ago, so I can't remember well how to bind the validate event. I think there is no need of binding the `submit` event (just like Burlak answer). – Pigueiras Dec 03 '12 at 16:11
I think, it's not work, because you init validate before your dom ready. Try use it in $(document).ready(...) – Burlak Ilia Dec 04 '12 at 06:42
@BurlakIlia If you put the script right before `
`, there is no need of calling `$(document).ready(...)`.
– Pigueiras Dec 04 '12 at 07:52

file input field validation

2 Answers2