0% found this document useful (0 votes)
5 views1 page

Image Validation Rules for Forms

The document contains jQuery validation methods for file size and image width checks. It sets up validation rules for a profile update form, requiring a first name and an image with specific constraints. Additionally, it includes a separate validation for a photo field, ensuring it meets minimum width requirements.

Uploaded by

Ashekin Mahadi
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
5 views1 page

Image Validation Rules for Forms

The document contains jQuery validation methods for file size and image width checks. It sets up validation rules for a profile update form, requiring a first name and an image with specific constraints. Additionally, it includes a separate validation for a photo field, ensuring it meets minimum width requirements.

Uploaded by

Ashekin Mahadi
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

$.validator.

addMethod('filesize', function (value, element, param) {


return [Link](element) || ([Link][0].size <= param)
}, 'File size must be less than {0}');

jQuery(function ($) {
"use strict";
$('#update_profile').validate({
rules: {
FirstName: {
required: true,
maxlength: 20
},
image: {
required: true,
extension: "jpg,jpeg",
filesize: 5,
}
},
});
});

$.[Link]('minImageWidth', function(value, element, minWidth) {


return ($(element).data('imageWidth') || 0) > minWidth;
}, function(minWidth, element) {
var imageWidth = $(element).data('imageWidth');
return (imageWidth)
? ("Your image's width must be greater than " + minWidth + "px")
: "Selected file is not an image.";
});

var validator = $('.some_form').validate({


rules: {
photo: {
required: true,
minImageWidth: 500
}
},
messages: {
photo: {
required: "You must insert an image"
},
}
});

You might also like