JQuery动态验证多维数组中的文件大小

Question

我尝试使用jquery validate，但我花了4个多小时来搜索如何解决我的问题，但找不到。问题是，当我尝试在多维数组中使用jquery验证文件大小时，它不起作用。它仍然可以提交表单而不显示错误消息。

这是我的领域

var numberIncr = 1;
$('#add-berkas').click(function () {
var box_html = $('<div class="text-box form-group row">n' +
'                        <div class="col-sm-8">n' +
'                            <input type="text" name="berkas['+numberIncr+'][nama]" placeholder="Nama File" class="form-control" required>n' +
'                        </div>n' +
'                        <div class="col-sm-4">n' +
'                            <input type="file" name="berkas['+numberIncr+'][file]" id="berkasfile'+numberIncr+'" accept="application/pdf" required/>n' +
'                            <button id="remove-berkas" class="btn btn-sm btn-danger remove-box" type="button"><i class="fa fa-trash"></i></button>n' +
'                        </div>n' +
'                    </div>');
$('.text-box:last').after(box_html);
box_html.fadeIn('slow');
numberIncr++;
});

这是验证

$.validator.addMethod('filesize', function (value, element, param) {
return this.optional(element) || (element.files[0].size <= param)
}, 'File size must be less than {0}');
var berkas = $('input[name^="berkas"]');
berkas.filter('input[name$="[file]"]').each(function() {
$(this).rules("add", {
extension: "pdf", filesize:1048576,
messages: "Berkas must be PDF and less than 1MB"
});
});
$("#form").validate({
rules: {
surat: {extension: "pdf", filesize: 1048576, },
},
messages: {
surat: "Surat must be PDF and less than 1MB",
},
errorPlacement: function(error,element){
showErrorMessage(error.text());
},
submitHandler: function(form) {
form.submit();
},
highlight: function(element, errorClass) {
return false;
}
});

Answer 1

您的问题可能是由于在页面加载时只调用此代码一次，而此时字段还不存在。。。

berkas.filter('input[name$="[file]"]').each(function() {
$(this).rules("add", {
extension: "pdf", filesize:1048576,
messages: "Berkas must be PDF and less than 1MB"
});
});

调用此代码时没有匹配的字段。该方法的全部目的是让您在创建每个字段后动态地添加规则。

添加新字段后必须立即调用它。将其放入底部附近的click处理程序中。

var numberIncr = 1;
$('#add-berkas').click(function () {
var box_html = $('<div class="text-box form-group row">n' +
.....
'                    </div>');
$('.text-box:last').after(box_html);
box_html.fadeIn('slow');
// add rules to new field here
$('[name="berkas[' + numberIncr + '][file]"]').rules("add", {
extension: "pdf", filesize:1048576,
messages: "Berkas must be PDF and less than 1MB"
});

numberIncr++;
});

您不需要.each()，因为每次单击只创建一个字段。只需针对新字段并添加规则即可。