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

jQuery验证不适用于隐藏输入

1 个答案: