jQuery 验证和接受= "image/*"

Question

我正在处理一个表单，它有一些文本字段和以下输入元素：

<input class='ignore' name='photo' id='photo' type='file' accept="image/*"/>   

此外，我还有脚本：jQuery、jQueryUI、jQuery验证、jQuery不引人注目和不引人注目的ajax。我认为这是最常见的jQuery脚本集。

但我遇到了非常痛苦的问题。这个输入总是标记为错误，在我选择图像后。所有浏览器也是如此。

我试着添加

$("#application-form").validate({
   ignore: ".ignore"
})

但这无济于事。所以，我真的很想知道如何处理这个问题。。。

PS。我还尝试使用某种变通方法，添加这个脚本而不是输入元素：

$("#photo-container").html("<input class='ignore' name='photo' id='photo' type='file' accept='image/*'/>   ");

但得到了完全相同的行为

Answer 1

已解决！

    $("#photo").rules("add", {
        accept: "jpg|jpeg|png|ico|bmp"
    });

Answer 2

这在我的案例中运行良好。

   $("#application-form").validate({
    rules: {
        photo: {
            required: true,
            extension: "jpg|jpeg|png|ico|bmp"
        }
    },
    messages: {
        photo: {
            required: "Please upload file.",
            extension: "Please upload file in these format only (jpg, jpeg, png, ico, bmp)."
        }
    },
    errorElement: "span",
    errorPlacement: function (error, element) {
        error.addClass("help-block");
        if (element.prop("type") === "checkbox") {
            error.insertAfter(element.parent("label"));
        } else {
            error.insertAfter(element);
        }
    },
    submitHandler: function () {
        //do your stuff here
    }
});

注意：必须包含additional-methods.js，因为核心验证插件中不包含extension方法。

<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.js"></script>