使用jquery输入文件类型错误验证不工作

input file type error validation not working using jquery

本文关键字：验证 工作 错误 类型 jquery 输入 文件 使用      更新时间：2023-09-26

目前在输入文件错误验证工作当我搜索验证时，我发现jquery验证，所以我已经开始使用它，当我搜索如何验证输入文件时，我从 so 得到了一些有用的信息基于此，我已经为输入文件创建了错误验证页面。与我目前的代码，我可以上传pdf &如果用户在没有上传任何文件的情况下点击下一步按钮，它应该说你错过了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
    }
    });

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

下面是详细代码的链接

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

谢谢你看这个问题

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

<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,
   }
},

小提琴

正确解决方案

以上解决方案是有效的，因为分配唯一的name和required规则集将触发验证，但不会返回期望的结果，因为OP试图验证具有相同name属性的输入，并根据无效输入字段的数量触发错误计数器。

原因验证不能在原始代码中工作，因为没有必要的规则

rules: {
    checkfile:"required"
},

定义的任何地方。

所以工作是设置required规则，并添加到输入相同的name属性或type使用jQuery each()函数

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

和验证将工作，错误将触发计数器和验证输入字段，错误计数器减少像OP的期望输出。

小提琴正确工作示例

相关文章：