How to image Validation in Jquery

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>