javascript - 输入文件类型错误验证无法使用 jquery 工作

Question

当前正在进行输入文件错误验证当我搜索验证时，我发现了 jquery 验证，因此我开始使用它，当我搜索如何验证输入文件时，我从 SO 获得了一些有用的信息 基于此，我为输入文件创建了错误验证页面。使用我当前的代码，我可以上传 pdf 和 Jpeg 文件并查看该文件，但如果用户单击“下一步”按钮而不上传任何文件，则验证不会发生，如果用户上传一个文件并单击“下一步”，则应该说您丢失了 2 个文件按钮，它应该显示您有 1 个文件丢失。我尝试在 html 输入类型字段中给出 required ，并尝试在 jquery 验证中给出 required ，但没有任何效果。

这是我的 jquery 代码

   $(".attachForm").validate({
        ignore: false,
         onkeyup: false,
            showErrors: function (errorMap, errorList) {
            var errors = this.numberOfInvalids();

            if (errors) {
                var message = errors === 0 ? 'You missed 1 field. It has been highlighted' : 'You have missed ' + errors + ' fields. Please fill before submitted.';
                $("#error_message").html(message);
                $(".error_msge").show();
            } else {
                $(".error_msge").hide();
            }
            this.defaultShowErrors();
        },
        errorPlacement: function () {
            return false;
        },
        highlight: function (element) {

            if($('input').attr('type') == 'checkbox') {

            } else {
               $(element).addClass('errRed');
                $(".file_ipt").addClass('errRed');
            }
            $(element).prevAll('label').find('span.required-star').addClass('text-error-red').removeClass('text-error-black');            
        },
        unhighlight: function (element) {

            if($('input').attr('type') == 'checkbox') {
            } else {
                $(element).removeClass('errRed');
                $(".file_ipt").addClass('errRed');
            }
            $(element).prevAll('label').find('span.required-star').addClass('text-error-black').removeClass('text-error-red');

        },rules: {
        apt_code:"required",
        apt_cer:"required",
        checkfile:"required"
        },
        submitHandler: function (form) { // for demo
        alert('valid form submitted'); // for demo
        return false; // for demo
    }
    }); 

我尝试更改所有字段中的名称，但没有用

这是fiddle link详细代码

请推荐我。请指导，因为我没有得到任何东西:(

感谢您查看问题。

Answer 1

您必须分配唯一的 name属性到每个<input type="file" class="checkfile">

<input type="file" class="checkfile" name="file_alpha">
<input type="file" class="checkfile" name="file_beta">

然后在 rules您必须定义这两个字段并确保它们是 required

rules: {
   file_alpha: {
        checkfile: "required",
        required: true,
   },
   file_beta: {
        checkfile: "required",
        required: true,
   }
},

Fiddle

正确的解决方案

上述解决方案将起作用，因为分配了唯一的 name和required规则集将触发验证，但不会返回所需的结果，因为 OP 尝试使用相同的 name 验证输入属性并根据无效输入字段的数量触发错误计数器。

由于没有必需的规则，验证在原始代码中不起作用

rules: {
    checkfile:"required"
},

在任何地方定义。

所以解决办法已设置 required规则并添加到具有相同 name 的输入属性或type使用 jQuery each()功能

$("input[type=file]").each(function() {
    $(this).rules("add", {
        required: true,
    });
});

并且验证将起作用，错误将通过计数器触发，并且在验证输入字段时，错误计数器会像OP所需的输出一样减少。

Fiddle Proper Working Example