user2896120 user2896120 - 4 months ago 10
jQuery Question

Validating images using jQuery plugin

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

Answer

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/