Input type file validation as id attribute is array instead of single value

Question

I want to validate my form having

<input type="file" id="file[]">

I want to submit form only when file is uploaded else throw an error message popup. The problem is this that i have made the code to upload the multiple files. So ID attribute of <input type="file"> is array(file[]).

I have tried

1. document.getElementById('file').value
2. document.getElementById('file[]').value
3. document.getElementById('file[3]').value

But everytime it's not working. I have checked it via firebug, it is giving error

 document.getElementById(...) // is null.

Answer 1

Your problem is very likely that you can't have square brackets ([]) in your ID.

See What are valid values for the id attribute in HTML? for more information.

Answer 2

You cannot create multiple elements with same id. Instead of id use class='fileInput' and Use

var fileArr = document.getElementByClassName("fileInput") ;

Then loop through the array and check whether all the file input is valid..

Answer 3

You have to make sure that the ID is valid and unique. This seems to be your current issue.

However, the ID attribute should be used to distinguish an element from the outside of his current group. Trying to deal with some kind of patterns in ID values to build groups might be unreadable and is more likely to cause unexpected errors (ie: same ID for more than one element or badly computed element ID).

Instead, if you want to make a group of more than one DOM elements, you may consider using the class attribute which is easy for jQuery to get / iterate.

<input name="fname" type="text" class="grp-1" />
<input name="lname" type="text" class="grp-1" />
<input name="file" type="file" class="grp-1" />

With this approach you could have :

var myGroup = $('.grp-1');
var firstInput = myGroup.eq(0);
var secondInput = myGroup.eq(1);

or

myGroup.foreach(function(index){
    var element = $(this);
    // whatever needs to be validated with the current element
});