How to implement validation for input type file using jQuery or javascript?

Hello, I have a HTML form inside which there is <input type="file" /> field, and now before posting form to the server side, I need to validate/check if file field is empty or not, I want user to upload atleast one image file in this field, so how I can implement validation message for <input type ="file" /> field in the form using jQuery or javascript code?

Sample HTML Form

<form action="/URL" method="post" name="value" enctype="multipart/form-data">
    <div><h3 class="page-title">Upload a New Invoice</h3></div>
    <div >
       
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 m-t-10">
         <input type="file" name="file" id="file"  />
            
           
            
          
            <div class="">
                <div class="editor-field">
                    <input type="submit" value="Create" class="btn btn-success " />
                </div>
            </div>
        </div>
    </div>
        </div>
</form>

Any Link or code would help, thank you.

Asked by:- jon

: 470 At:- 6/27/2018 8:59:35 AM

HTML Javascript file input validation

add comment to question

1 Answers

Answered by:- jaya

There are various ways to validate file input using javascript/jQuery

You can simply validate by checking $("#FileInput").val() == ""

if($("#FileInput").val() == "")
{
  //alert value cannot be null
}?

Using jQuery Validate plugin

$.validator.addMethod('filesize', function(value, element, param) {
   return this.optional(element) || (element.files[0].size <= param) 
});    

$('#form').validate({
        rules: {
            firstname: {
                minlength: 6,
                required: true
            },

            file: {
                required: true, 
                extension: "png|jpeg|jpg",
                filesize: 1048576,   
            }
        },
        messages: 
           { 
            file: "File must be JPEG or PNG, less than 1MB" 
           },
        highlight: function(element) {
            $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight: function(element) {
            $(element).closest('.form-group').removeClass('has-error');
        },
       
        errorPlacement: function(error, element) {
            if(element.parent('.input-group').length) {
                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element);
            }
        }
    });
?

HTML of above Code can be as below

<form id="form" enctype="multipart/form-data">
    <div class="form-group">
        <label class="control-label" for="firstname">First:</label>
        <div class="input-group">
            <input class="form-control"  name="firstname" type="text" />
        </div>
    </div>        
    
        <div class="form-group">
        <label class="control-label" for="file">Image:</label>
        <div class="input-group">
            <input  id="file" name="file" type="file" />
        </div>
    </div>
    
    
        <button type="submit" class="btn btn-primary">Submit</button>
</form>

using jQuery to place the required attribute in all input type="file" fields of the page

$('input[name^="fileupload"]').each(function () {
    $(this).rules('add', {
        required: true,
        accept: "image/jpeg, image/png"
    })
})?

Fiddle link

Anyone of the above solution should work.