0

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"
            },
        },
                    });
               });
}

1 Answer 1

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/

Sign up to request clarification or add additional context in comments.

2 Comments

Thanks a lot! Is there a way to check image dimensions and validate that an image should be greater than a certain width?
@user2896120, use the .addmethod() method to create a new rule and see this posting for how to write the function.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.