为什么没有运行 jquery 验证？

Question

我有这个包含所有其他输入的表单，所有输入都正确显示错误，除了这个是文件上传。

谁能给我一双眼睛，看看我哪里做错了？

当我 console.log(element) 时，应该会显示错误发生的时间，但它甚至根本没有发生。

这是我的html代码

<label for="phone">Phone</label><input type="text" name="phone" value="">
<label for="city">City</label><input type="text" name="city" value="">
<label for="qr_code_image">QR CODE</label><input type="file"  class="hidden image-field" name="qr_code_image" id="qr_code_image"><div class="add-image-icon" data-field="qr_code_image"><i class="icon-plus"></i></div>

在我的 js 中

           rules: {
                city: {
                    required: true
                },
                phone: {
                    required: true,
                },
                qr_code_image: {
                    required: true
                }
            },
            // Where to place the error message
            errorPlacement: function (error, element) {
                console.log(element);
                error.appendTo(element.next('.errorMsg'));
            }

我没有在此处添加错误输出的 div。 使用控制台日志，我只能看到两个错误而不是 3 个。 我尝试提交，甚至没有点击图片上传。

编辑：我意识到这两个类都在使用display: none !important

有没有办法保留 css 并仍然使验证工作？

Answer 1

试试这个：

...
qr_code_image: {
  required: true,
  accept: "image/jpeg, image/pjpeg"
}

Answer 2

$(document).ready(function () {

    $('#form').validate({
        ignore: [],
        rules: {
           city: {
                required: true
            },
            phone: {
                required: true,
            },
            qr_code_image: {
                required: true,
                accept: 'jpeg|png|jpeg'
            }
        },
         // Where to place the error message
        errorPlacement: function (error, element) {
            console.log(element);
            error.appendTo(element.next('.errorMsg'));
        }
    });

});

在选项中添加ignore:[] 字段可能会解决问题。我也遇到了类似的问题，解决了问题。