jquery-validate - jquery验证文件输入不起作用

问题描述

嗨，我有一个带有输入文件和更多字段的 html 表单。我将通过 jquery 表单验证器插件对其进行验证。它就像文本输入和选择的魅力，但它只是在文件输入为空时验证文件输入。当我选择任何错误类型或错误大小的文件时，即使我没有填写其他必需的文本输入，它也会以 GET 方法提交表单。这是我的 jquery 代码：
$("#form").validate({
        ignore: 'input[type=hidden], .select2-search__field', // ignore hidden fields
        errorClass: 'validation-error-label',
        successClass: 'validation-valid-label',
        highlight: function (element, errorClass) {
            $(element).removeClass(errorClass);
        },
        unhighlight: function (element, errorClass) {
            $(element).removeClass(errorClass);
        },

        // Different components require proper error label placement
        errorPlacement: function (error, element) {

            // Styled checkboxes, radios, bootstrap switch
            if (element.parents('div').hasClass("checker") || element.parents('div').hasClass("choice") || element.parent().hasClass('bootstrap-switch-container')) {
                if (element.parents('label').hasClass('checkbox-inline') || element.parents('label').hasClass('radio-inline')) {
                    error.appendTo(element.parent().parent().parent().parent());
                } else {
                    error.appendTo(element.parent().parent().parent().parent().parent());
                }
            }

            // Unstyled checkboxes, radios
            else if (element.parents('div').hasClass('checkbox') || element.parents('div').hasClass('radio')) {
                error.appendTo(element.parent().parent().parent());
            }

            // Input with icons and Select2
            else if (element.parents('div').hasClass('has-feedback') || element.hasClass('select2-hidden-accessible')) {
                error.appendTo(element.parent());
            }

            // Inline checkboxes, radios
            else if (element.parents('label').hasClass('checkbox-inline') || element.parents('label').hasClass('radio-inline')) {
                error.appendTo(element.parent().parent());
            }

            //  Input group, styled file input
            else if (element.parent().hasClass('uploader') || element.parents().hasClass('input-group')) {
                error.appendTo(element.parent().parent());
            }

                // Inline checkboxes, radios
                // else if (element.parents().hasClass('uploader')) {
                //     error.appendTo(element.parent().parent().parent().parent());
            // }
            else {
                error.insertAfter(element);
            }
        },
        validClass: "validation-valid-label",
        success: function (label) {
            label.addClass("validation-valid-label").text("معتبر.")
        },
        rules: {
            title: {
                required: true,
                minlength: 8
            },
            unique_name: {
                required: true,
                minlength: 3
            },
            lang: {
                required: true,
            },
            style: {
                required: true,
            },
            image01: {
                required: true,
                // extension: "gif|png|jpg|jpeg", // work with additional-mothods.js
                accept: "image/jpeg, image/pjpeg",
                filesize: 1000000, // 1MB,  this filesize method is the custom method that I create. the code can be found in this post.
            }
        },
        messages: {
            image01: {
                require: "لطفا لوگوی سایت را انتخاب نمایید",
                filesize: "حجم مجاز فایل ۱ مگابایت می باشد",
                extension: "فرمت مجاز فایل jpeg,gif,png می باشد"
            },
            title: {
                required: "لطفا فیلد را با حداقل 8 کاراکتر کامل نمایید",
            },
            unique_name: {
                required: "لطفا فیلد مورد نظر را کامل کنید",
                minlength: "حداقل ۳ کاراکتر.کاراکترها بهتر است انگلیسی باشد"
            },
            lang: {
                required: "لطفا زبان مورد نظر را انتخاب نمایید",
            },
            style: {
                required: "لطفا قالب مورد نظر را انتخاب نمایید",
            }
        },
        submitHandler: function (form) {
            $.ajax({
                type: "POST",
                //enctype: 'multipart/form-data',
                url: "/admin/{{ CURRENTCLASS }}/fullInsert",
                data: new FormData($("#form")[0]),
                datatype: 'json',
                cache: false,
                contentType: false,
                processData: false,
                beforeSend: function () {
                    //$("#loaderDiv").show();
                },
                success: function (result) {

                    result = $.parseJSON(result);
                    if (result.dataUpload === true && result.imageUpload === true) {

                        $('#modalheader').removeClass().addClass('modal-header bg-success');
                        $('.modal-title').html("ثبت اطلاعات");
                        $('#modal-msg').html(result.dataEntryMsg);
                        $('form')[0].reset();

                    } else if (!result.dataUpload) {

                        $('#modalheader').removeClass().addClass('modal-header bg-danger');
                        $('.modal-title').html("خطا در ثبت اطلاعات");
                        $('#modal-msg').html(result.dataEntryMsg);
                        $('form')[0].reset();

                    } else if (result.dataUpload == true & result.imageUpload == false) {

                        $('#modalheader').removeClass().addClass('modal-header bg-warning');
                        $('.modal-title').html("خطا در ثبت تصویر");
                        $('.modal-body').html(result.dataEntryMsg + "<br>" + result.imgUploadMsg);

                    }

                    $('#modal_theme').modal('toggle');

                },
                complete: function () {
                    //$("#loaderDiv").hide();
                },
                error: function (result) {
                    // alert('4');
                    // $('#modal_theme').modal('toggle');
                    // $("#loaderDiv").hide();
                    // $('.modal-body').html(result.msg);
                    // $('#delModal').modal('toggle');
                }
            });
            return false; // required to block normal submit since you used ajax
        }
    });
标签： jquery-validate
jquery-validate - jquery验证文件输入不起作用

问题描述

解决方案

推荐阅读
