How to image Validation in Jquery

0

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>