1

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>
Sparky
  • 98,165
  • 25
  • 199
  • 285
Daniel Vargas
  • 23
  • 2
  • 7
  • This plugin, by default, will ignore any input element that is hidden. You can set the `ignore` option to "nothing", by using `ignore: []`, which will ignore nothing, validate everything. – Sparky Jul 26 '18 at 14:27

1 Answers1

1

then you can use visibility instead of display: none;

input{
  visibility:hidden;
  position: absolute;
}
label{
  position: relative;
}
charan kumar
  • 2,119
  • 2
  • 20
  • 26