jQuery Validate not working on hidden input [duplicate]

I haven't been able to make jquery validate my file inputs.

In the same form I valid other inputs as well and they work, however It doesn't seem to work with the files.

If i don't use the style display=none in the input, the required rule works, however I need the extension rule too and I need the input to be hidden since I need to style the button in a nicer way.

Is there any work around this? I mean, jquery validations and good style for the upload buttons?

This is my html:

<div class="form-group"> <label>Title: *</label> <div class="help-info imput-text">Subtitle</div> <label class="btn btn-raised btn-primary btn-lg btn-round waves-effect" id="upload_button"> <input type="file" id="file" name="file" style="display: none;" data-required_file="true">Load </label> </div> 

This is my javascript:

$(document).ready(function () { $("#my_form").validate({ rules: { file: { required: true, extension: "jpg|pdf", }, } }); }); $("#file").on("change", (event) => { const $file = $(event.target); if ($file.valid()) { //Do stuff } }); 

These are my jquery imports:

<script src="'theme/plugins/jquery-validation/jquery.validate.js')"></script> <script src="theme/plugins/jquery-validation/additional-methods.js')"></script> <script src="'theme/plugins/jquery-steps/jquery.steps.js'"></script> <script src="'theme/js/pages/forms/form-validation.js'"></script> <script src="'theme/plugins/jquery-validation/localization/messages_es.js'"></script>