javascript - 使用 jQuery 插件验证图像

Question

我正在尝试使用 jQuery 验证插件来验证输入文件类型。我已经实现了它的基本规则，但由于某种原因它无法正常工作。所需的规则有效，但是当我尝试上传图像时，错误消息由于某种原因不会消失。我希望用户上传 jpg、jpeg 或 png 类型的图像，如果我上传错误的图像类型，甚至不会显示错误消息。这是我的jsfiddle:https://jsfiddle.net/avs9pejv/5/

HTML

<div class="article_properties">
                        <form class="article_properties_form" action="" method="POST" enctype="multipart/form-data">
                        <p style="display: inline">Page Number</p>
                        <div style="background-color: #FF355E; padding: 5px; display: inline; margin-left: 5px">

                        <p style="display: inline" class="pageNumber"></p>
                        </div>
                        <textarea style="display: none" class="inputNumber" name="pageNumber"></textarea>
                        <p>Image</p>
                        <input style="padding: 0px" type="file" name="image">
                            <p>Subtitle</p>
                            <input type="text" name="subtitle">

                            <p>Text</p>
                            <textarea name="text" rows="4"></textarea>
                            <input id="properties_btn" type="submit" value="Submit/Update">
                            <hr style="border: 1px dotted lightgray; margin-bottom: 50px">
                        </form>



                    </div> <!--End of article properties div-->
                <div id="addOne"><p>+Add page</p></div>

jQuery

$(".article_properties_form").validate({
        errorElement: 'div',
        rules: {
            image: {
                required: true,
                extension: "jpg,jpeg, png"
            },

            subtitle: {
                required: true,
                minlength: 2,
                maxlength: 25
            },
            text: {
                required: true,
                minlength: 35,
                maxlength: 275
            }
        },

        messages: {
            image: {
                required: "This page needs an image",
                extension: "You're only allowed to upload jpg or png images."
            },

            subtitle: {
                required: "You have to provide a subtitle for this page!",
                minlength: "Your subtitle must be at least 2 characters long",
                maxlength: "Your subtitle must be less than 25 characters long"
            },
            text: {
                required: "Please enter text for this page",
                minlength: "Your text must be at least 35 characters long",
                maxlength: "Your text must be less than 275 characters long"
            },
        },

        });

var numPages = 10;
$('.pageNumber').text(numPages);
$('.inputNumber').text(numPages);

$('#addOne').click(function()
                    {

                        numPages--;

                        if (numPages == 1)
                        {
                            var articlePropsTemplate = $('.article_properties_form:last').clone();           
                                $('.article_properties').append(articlePropsTemplate);                         
                                $('.pageNumber:last').text(numPages);
                                $('.inputNumber:last').text(numPages);
                                 articlePropsTemplate[0].reset();
                                 add_validation_for_forms();

                    articlePropsTemplate.validate().resetForm();
                                $('.nextBtn').fadeIn("slow");
                                $('#addOne').hide();
                        }

                        else
                        {
                                var articlePropsTemplate = $('.article_properties_form:last').clone();
                                $('.article_properties').append(articlePropsTemplate);
                                 articlePropsTemplate[0].reset();
                                $('.pageNumber:last').text(numPages);
                                $('.inputNumber:last').text(numPages);
                                add_validation_for_forms();
                                articlePropsTemplate.validate().resetForm();
                        }

                });

                function add_validation_for_forms(){
                $(".article_properties_form").each(function(){
                    $(this).validate({
                        errorElement: 'div',

        rules: {
            image: {
                required: true,
                extension: "jpg|jpeg|png"
            },

            subtitle: {
                required: true,
                minlength: 2,
                maxlength: 25
            },
            text: {
                required: true,
                minlength: 35,
                maxlength: 275
            }
        },

        messages: {
            image: {
                required: "This page needs an image",
                extension: "You're only allowed to upload jpg or png images."
            },

            subtitle: {
                required: "You have to provide a subtitle for this page!",
                minlength: "Your subtitle must be at least 2 characters long",
                maxlength: "Your subtitle must be less than 25 characters long"
            },
            text: {
                required: "Please enter text for this page",
                minlength: "Your text must be at least 35 characters long",
                maxlength: "Your text must be less than 275 characters long"
            },
        },
                    });
               });
}

Answer 1

查看 your jsFiddle ，我收到控制台错误...

Exception occurred when checking element , check the 'extension' method.

要使用扩展方法，您必须首先通过 the additional-methods.js file 包含此方法.

工作中:https://jsfiddle.net/avs9pejv/6/