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.
There are various ways to validate file input using javascript/jQuery
$("#FileInput").val() == ""
if($("#FileInput").val() == "")
{
//alert value cannot be null
}?
$.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>
$('input[name^="fileupload"]').each(function () {
$(this).rules('add', {
required: true,
accept: "image/jpeg, image/png"
})
})?
Anyone of the above solution should work.
Subscribe to our weekly Newsletter & Keep getting latest article/questions in your inbox weekly