Validation is not working proper for bootstrap file upload

Question

I am using bootstrap file style. I have set the Jquery validation on it which is working but I don't know what the issue in my code. I am uploading the image jpg, png, jpeg, gif but validation is still showing error after uploading the image.

I mean I am not able to upload the image because I am getting validation error but I am using correct image. I am uploading jpg image but still showing error "File must be JPG, GIF or PNG". Would you help me in this?

$(":file").filestyle({buttonBefore: true,buttonText: "Upload Image"});
	
	     function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#blah')
                        .attr('src', e.target.result)
                        .width(250)
                        .height(200);
                };

                reader.readAsDataURL(input.files[0]);
            }
        }


	 $(function() {
  $("form[name='registration']").validate({

    // Specify the validation rules
    rules: {
      fileToUpload: {
        required: true,
        accept: "png|jpe?g|gif"
      }
    },
    // Specify the validation error messages
    messages: {
      fileToUpload: {
        required: "Please upload  image",
        accept: "File must be JPG, GIF or PNG"
      }
    },

    submitHandler: function(form) {
      form.submit();
    }
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-filestyle/1.2.1/bootstrap-filestyle.min.js"></script>


<form name="registration" method="post" action="process.php">
<input type='file' onchange="readURL(this);" class="filestyle input-field" data-buttonBefore="true" data-buttonText="Upload Image" name="fileToUpload" id="fileToUpload" />

  <input type="submit" name="submit" value="submit">
</form>

Answer 1

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-filestyle/1.2.1/bootstrap-filestyle.min.js"></script>


<form name="registration" method="post" action="process.php">
<input type='file' onchange="readURL(this);" class="filestyle input-field" data-buttonBefore="true" data-buttonText="Upload Image" name="fileToUpload" id="fileToUpload" />

  <input type="submit" name="submit" value="submit">
</form>
<script>

$(":file").filestyle({buttonBefore: true,buttonText: "Upload Image"});
	
	     function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#blah')
                        .attr('src', e.target.result)
                        .width(250)
                        .height(200);
                };

                reader.readAsDataURL(input.files[0]);
            }
        }


	 $(function() {
	 //console.log(validate())
	
  $("form[name='registration']").validate({

    // Specify the validation rules
    rules: {
      fileToUpload: {
        required: true,
        accept: "*.PNG|*.jpe?g|*.GIF|*.png|*.JPE?G|*.gif"
      }
	 
    },
    // Specify the validation error messages
    messages: {
      fileToUpload: {
        required: "Please upload  image",
        accept: "File must be JPG, GIF or PNG"
      }
    },

    submitHandler: function(form) {
      form.submit();
    }
  });
  
});
</script>

Try giving *.png and same for other formats in the rules.Hope this resolves your problem.