uncaught TypeError: Cannot read property 'call' of undefined using jQuery validation
Question
i tried to apply validation system use jQuery for upload image and multiple images, check file extension and file size but it gives me error uncaught TypeError: Cannot read property 'call' of undefined
hi, i tried to apply validation system use jQuery for upload image and multiple images, check file extension and file size but it gives me error uncaught TypeError: Cannot read property 'call' of undefined
$(document).ready(function () { jQuery.validator.setDefaults({ debug: true, success: "valid" }); $("#myform").validate({ rules: { "image": { extension: "jpg|jpeg|png|gif", filesize: "2048" }, "images[]": { extension: "jpg|jpeg|png|gif", filesize: "2048" }, } }); }); <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>rules</title> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min:js"></script> <script src="https.//cdn.jsdelivr.net/npm/jquery-validation@1.19.2/dist/jquery.validate:js"></script> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min:css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min:css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> </head> <body> <div class="container"> <form id="myform"> <div class="form-group" id="divim"> <label>image annonce<span class="text-hightlight">*</span></label> <input type="file" name="image" class="form-control @error('image') is-invalid @enderror" required autocomplete="image"> </div> <div class="form-group" id="divims"> <label>images annonce<span class="text-hightlight">*</span></label> <input type="file" name="images[]" class="form-control @error('images') is-invalid @enderror" required autocomplete="images" multiple> </div> <button class="btn btn-theme">valider</button> </form> </div> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </body> </html>2 answers
solution1
1 2022-02-11 16:49:16
Add this code to your additional-methods.js file.
$.validator.addMethod('fileSize', function (value, element, param) {
return this.optional(element) || (element.files[0].size <= param)
}, 'default message');
solution2
0 2020-09-30 21:11:47
Running your code, I see the following exception being thrown:
Exception occurred when checking element , check the 'extension' method. TypeError: Cannot read property 'call' of undefined
It seems like the extension method isn't included in the validate plugin by default. It's a separate script you need to include in your html.
Including <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.2/dist/additional-methods.js"></script> fixed it for me.
Browsing the documentation of the jQuery validation plugin, I didn't see a method for filesize . See https://jqueryvalidation.org/jQuery.validator.addMethod/ to create one yourself. Should be straightforward.
For example:
jQuery.validator.addMethod('filesize', function (value, element, arg) {
// value -> name of the file being uploaded
// element.files[0].size -> size of file being uploaded
// arg -> 2048
// Do some validation of filesize and return true or false
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.