jQuery Validation for File Input Type

When we use input type file in HTML form, then we must validate it before form submitted.

Client side validation can be easily done using jQuery or JavaScript.

In this tutorial, we will see how to validate input type file with jQuery.

HTML

<div class="form-group">
<input type="file" class="form-control" id="idaddproof3" name="idaddproof" accept="image/*" required="required"> 
<span class="errorMSG" id="msgaadhaarfile"></span>
</div>

<input type="button" name="submit" value="Submit" onclick="validate();"/> 

JavaScript

First include jquery library

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

Writing some scripts to validate input field

<script> 
function validate() { 
var file = $('#idaddproof3').val(); 
if (file=="") {  
$("#msgaadhaarfile").html("Please Select Aadhaar Image"); $("#idaddproof3").focus(); 
return false;          
}else{ 
/* There are files */  
var file_size = $('#idaddproof3')[0].files[0].size / 1024 / 1024; // in MB
$("#msgaadhaarfile").html(""); 
} 
if(file_size > 2) {  
$("#msgaadhaarfile").html("File size is greater than 2MB");  $('#idaddproof3').focus();  return false; 
} else{
$("#msgaadhaarfile").html(""); 
} } 
</script>  

View Demo

[sociallocker] Download [/sociallocker]