Why is this multiple file input in jquery validate not showing any error message?

Question

I am trying to validate a multiple file input. I have rules for it. However the very basic thing of required: true is not working. Here is my code..

        <form id="profile-form" action="" method="post">

            <div class="row">
            <div class="form-group col-md-2">
                <label style="padding-left:20px;padding-top:10px">Upload image<strong> (5 images required)<strong></label>
            </div>
            <div class="form-group col-md-4">
                <input class="form-control" type="file" name="files[]" id="files" accept="png|jpg|jpeg" required="required" multiple>
            </div>
        </div>
</form>

The validation.js containing the rules are as follows:

     $("#profile-form").validate({
    rules: {

      name: {
        required: true,
        nowhitespace: true,
        lettersonly: true
      },

 'files[]': {
            required: true,
          },    
    },

    messages: {

      name: {
        required: 'Please enter your first name',
      },
      'files[]': {
        required: 'Please insert your 5 images',
      },
      }
});

It is working for all other validations. All the 40 validations that I have written in same manner; they work and this one doesnt show the custom error message. — Nevermore
– Nevermore, Commented Dec 14, 2015 at 7:58

madalinivascu · Accepted Answer · 2015-12-14 08:08:51Z

1

Try the required attribute

<input class="form-control" type="file" name="files[]" id="files" accept="png|jpg|jpeg" required="required" multiple>

or:

rules:{
    'files[]': {
            required: true,
          },
},
message:{
    'files[]': {
            required: 'Please insert your 5 images',
          },
}

Note: you will need to create a new rule to count the 5 images

edited Dec 14, 2015 at 8:08

answered Dec 14, 2015 at 7:37

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

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

Comments

prajakta · Accepted Answer · 2015-12-14 07:46:30Z

0

Replace code with this:

files[]: {
        required: true
      },

files[]: {
        required: 'Please insert your 5 images'
      },

Also, add

<input class="form-control" type="file" name="files[]" id="files" accept="png|jpg|jpeg" required="required" multiple>

edited Dec 14, 2015 at 7:46

answered Dec 14, 2015 at 7:42

prajakta

1624 bronze badges

2 Comments

Nevermore Over a year ago

I tried this code. Same result. It prints its custom message.. ie. This field is required

Nevermore Over a year ago

I have written same thing. Still it shows same result( This field is required).

prajakta · Accepted Answer · 2015-12-14 07:51:04Z

0

You can also add simple function as following:
message: { required: "This field is required." }

answered Dec 14, 2015 at 7:51

prajakta

1624 bronze badges

Collectives™ on Stack Overflow

Why is this multiple file input in jquery validate not showing any error message?

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related