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

【问题标题】：jQuery validation and accept="image/*"jQuery 验证和接受="image/*"
【发布时间】：2013-02-06 06:55:06
【问题描述】：

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

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

另外，我有脚本：jQuery、jQueryUI、jQuery 验证、jQuery unobtrusive 和 unobtrusive-ajax。我认为这是最常见的一组 jQuery 脚本。

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

我尝试添加

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

但这没有帮助。所以，我真的很想知道如何处理这个问题......

附言。我还尝试通过添加此脚本而不是输入元素来使用某种解决方法：

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

但行为完全相同

【问题讨论】：

您的 jQuery 没有任何问题。

标签： jquery jquery-validate

【解决方案1】：

解决了！

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

【讨论】：

【解决方案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>

【讨论】：