input file type error validation not working using 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.

The reason why the code isn't working is because this.numberOfInvalids(); doesn't yield any errors. Check your implementation. — DinoMyte
– DinoMyte, Commented Oct 12, 2015 at 19:04
@DinoMyte thanks for the reply i am giving required in all the field and i am confused how to solve this kindly please help me :( — Mr.M
– Mr.M, Commented Oct 12, 2015 at 19:06
You might wanna add class="required" to your code. Here's an example : jsfiddle.net/UURz2 — DinoMyte
– DinoMyte, Commented Oct 12, 2015 at 19:08
@DinoMyte in the text field or in the jquery code buddy class="required" — Mr.M
– Mr.M, Commented Oct 12, 2015 at 19:13
@DinoMyte i tired with the given example still not working :( — Mr.M
– Mr.M, Commented Oct 12, 2015 at 19:34

Shehary · Accepted Answer · 2015-10-12 21:47:20Z

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

edited Oct 12, 2015 at 21:47

answered Oct 12, 2015 at 20:17

Shehary

9,99810 gold badges47 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Mr.M Over a year ago

thank you so much for the effort but the counting was not reducing kindly please help me when i upload for one field

Mr.M Over a year ago

kindly please help me

Shehary Over a year ago

looking into that, give me some time

Mr.M Over a year ago

Is that possible to bind after file upload

Shehary Over a year ago

there are couple of things in your code, why there is if($('input').attr('type') == 'checkbox') and where the rule is defined checkfile:"required" i don't see any checkfile function in code

|

Collectives™ on Stack Overflow

input file type error validation not working using jquery

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related