jQuery验证不处理隐藏输入

Question

我还无法让jquery验证我的文件输入。

在相同的表单中，我也使用其他输入，它们也可以工作，但是它似乎不适用于文件。

如果我在输入中不使用样式display=none，那么所需的规则就能工作，但是我也需要扩展规则，而且我需要隐藏输入，因为我需要更好地样式按钮。

这方面有什么工作吗？我的意思是，jquery验证和良好的风格上传按钮？

这是我的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>

这是我的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
    }
});

这些是我的jquery导入：

<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>

Answer 1

然后，您可以使用可见性而不是显示:无；

input{
  visibility:hidden;
  position: absolute;
}
label{
  position: relative;
}