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

那么你可以使用可见性而不是显示：none;

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

jQuery 验证不处理隐藏输入

jQuery Validate not working on hidden input

jquery

jquery-validate