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

Question

Currently working on input file error validation When i searched about the validation i have found jquery validation so i have started using it and again when i searched about how to validate the input file i have got some useful information from SO Based on that I have created error validation page for input file. With my current code I can able to upload pdf & Jpeg file and view the file but the validation was not happening if user click next button without uploading any file it should say you have 2 files missed if the user upload one file and he click next button it should say you have 1 file miss. I have tried giving required in the html input type field and tried giving required in jquery validation nothing was working.

Here is my jquery code

   $(".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
    }
    }); 

I tried changing the name in all field but no use

Here is the fiddle link for the detailed code

Kindly please suggest me. kindly guide as i am not getting any stuff :(

Thanks for looking the question.

Answer 1

You have to assign the unique name attribute to each <input type="file" class="checkfile">

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

and then in rules you have to define both fields and make sure they are required

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

Fiddle

Correct Solution

Above solution will work because assigning the unique name and required rules set will trigger the validation but will not return the desired result because OP trying to validate the input with same name attribute and triggering the error counter according to number of invalid input fields.

Reason the validation not working in original code because no required rules

rules: {
    checkfile:"required"
},

defined anywhere.

so work around is set required rules and add to inputs with same name attribute OR type using jQuery each() function

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

and validation will work, errors will triggered with counter and on validating the input field, error counter decrease as like OP's desired output.

Fiddle Proper Working Example