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>

jQuery验证和accept =“image / *”

2 个答案: