Validating images using jQuery plugin

Question

I am trying to validate an input file type using jQuery validation plugin. I have implemented the basic rules for it, but for some reason it's not working properly. The required rule works, but when I try to upload an image the error message does not go away for some reason. I want users to upload images that are either jpg, jpeg, or png type and even the error message doesn't show if I upload the wrong image type. Here's my 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"
            },
        },
                    });
               });
}

score 1 · Accepted Answer · answered Jul 13 '16 at 00:24

1

Looking at your jsFiddle, I get a console error...

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

To use the extension method, you must first include this method via the additional-methods.js file.

Working: https://jsfiddle.net/avs9pejv/6/

answered Jul 13 '16 at 00:24

Sparky

98,165
25
199
285

Thanks a lot! Is there a way to check image dimensions and validate that an image should be greater than a certain width? – user2896120 Jul 13 '16 at 00:41
@user2896120, use the `.addmethod()` method to create a new rule and see this [posting](http://stackoverflow.com/q/12570834/594235) for how to write the function. – Sparky Jul 13 '16 at 13:38

Validating images using jQuery plugin

1 Answers1