Question

目前正在处理输入文件错误验证当我搜索有关验证时，我已经找到了jquery验证，所以我已经开始使用它，当我搜索有关如何验证输入文件时，我已经从 SO获得了一些有用的信息基于此我已为输入文件创建了错误验证页面。使用我目前的代码，我可以上传pdf＆amp; Jpeg文件并查看文件，但如果用户单击下一步按钮而没有上传任何文件则验证没有发生它应该说如果用户上传一个文件并且他点击下一个按钮就会错过2个文件它应该说你有1个文件未命中。我已经尝试在html输入类型字段中提供必需，并尝试在jquery验证中提供必需的功能。

这是我的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规则，并使用jQuery name函数

添加具有相同type属性或each()的输入

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

并且验证将起作用，错误将通过计数器触发并验证输入字段，错误计数器减少与OP的期望输出一样。

Fiddle Proper Working Example

输入文件类型错误验证无法使用jquery

1 个答案: