jQuery动态验证多维数组中的文件大小 [英] JQuery Validate Filesize in Multidimensional Array Dynamically

问题描述

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

I tried using jquery validate but i've spent more than 4 hours to search how to solve my problem but couldn't find it. The problem is when I tried using jquery validate for filesize in multidimensional array, it doesn't work. It can still submit the form and not showing the error message.

这是我的领域

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

推荐答案

您的问题是由于字段不存在时，大概在页面加载时仅调用一次此代码而引起的.

Your problem is caused by presumably only calling this code once on page load, when the fields don't yet exist...

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

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

There are no matching fields at the time you call this code. The whole point of this method is for you to dynamically add the rules after you create each field.

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

You must call it immediately after adding a new field. Put it inside the click handler near the bottom.

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()，因为每次单击仅创建一个字段.只需定位新字段并添加规则即可.

You wouldn't need an .each() since you only create one field on each click. Just target the new field and add the rule.

这篇关于jQuery动态验证多维数组中的文件大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！