CODEWITHSUNDEEP
jqueryvalidationfileformsupload
Steve Kemp
Steve Kemp

Reputation: 323

Adding validation to upload form using jQuery validation plugin

I've got a simple HTML file upload form. I'm using the jQuery validation plugin in other forms to check for required values and would like to use this in the file upload form to ensure the user has clicked the Browse . . . button first and selected a file. The relevant code is below which is based on how other forms are setup but this one isn't working like the others:

<script src="lib/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="lib/jquery.validate.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="lib/jquery.metadata.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript">
    $.metadata.setType("attr", "validate");

    $(document).ready(function(){
    $("#upload").validate();
    });
    </script>

<form enctype="multipart/form-data" action="fileupload.php" method="POST" id='upload'>
Choose a file to upload: <input name="new_file" type="file" validate = "required:true">
<label for = "new_file" class = "error">You must select a file first before you can upload</label>
<input type="submit" name="action" value="Upload">

</form>

Grateful if someone can point out what I'm doing wrong.

Many thanks, Steve

Upvotes: 0

Views: 2810

Answers (1)

Chinmayee G
Chinmayee G

Reputation: 8117

Try by putting your validation script inside document.ready method. i.e.

$(document).ready(function(){
    $.metadata.setType("attr", "validate");

    $(document).ready(function(){
         $("#upload").validate();
    });
});

working demo

Upvotes: 1

Related Questions