If you have contact form or job apply form in your website, then you might have FILE field in the form. Where you are actually asking user to upload/submit valid file. If it is a job apply form then you would be asking to submit .doc, .docx, .rtf, .odt files. With jQuery it is easy to check and validate which file/s users are allowed to submit. You may also like How to validate files using bootstrap validator and jQuery Form Validation before Ajax submit.
Jquery Plugin File
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
HTML Code
<form class="form-horizontal" id="import_app" method="post" action="" enctype="multipart/form-data">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><strong>Import </strong>App</h3>
</div>
<div class="panel-body">
<div class="form-group">
<label class="col-md-3 col-xs-12 control-label">App Name <span style="color: #ff0000">*</span></label>
<div class="col-md-6 col-xs-12">
<div class="">
<input type="text" required="" value="" name="appname" class="form-control"/>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-3 col-xs-12 control-label">App Img <span style="color: #ff0000">*</span></label>
<div class="col-md-6 col-xs-12">
<div class="">
<input type="file" required="" value="" name="appimg" />
</div>
</div>
</div>
</div>
<div class="panel-footer">
<button class="btn btn-primary pull-right">Submit</button>
</div>
</div>
</form>
Jquery Code
<script type="text/javascript">
$(function() {
$("#import_app").validate({
rules: {
appname:"required",
appimg: {
required: true,
extension: "jpeg|jpg|png|gif"
},
},
messages: {
appname: "Please Enter your App Name",
appimg: {
required: "Please select App Image",
extension: "Please select only jpeg, jpg, png, gif File"
},
},
submitHandler: function(form) {
form.submit();
}
});
});
</script>