How to use an id instead of a name in jquery validate rules

Question

I am attempting to setup validation for a file upload. I am already using jquery validate for other inputs in my form (not shown here for simplicity), so I wanted to continue to use this method for consistency.

I am struggling getting it to work because the name field in my file input has brackets for an array to upload multiple attachments. Thefore, I am running into one of two issues:

I put in the actual name in the jquery rule uploadedFile[] and then I get an error.
I take the brackets off and just have uploadedFile, but then this field isn't recognized and the validation doesn't work.

The most logical thing to me is to use the id. I cannot find a good method based on everything I have searched.

Is there a way to run this using the id for uploadedFile[] or is there a different, more effective way of doing this?

Input

<input type="file" name="uploadedFile[]" class="inputfile" id="uploadedFileTest" data-multiple-caption="{count} files selected" multiple>

JS

$('#shareProjectForm').validate({
    ignore: [],
    rules: {
        uploadedFile: {
            required: true,
            extension: 'png|jpg|jpeg|pdf|gif'
        }
    },
    messages: {
        uploadedFile: {
            required: "A file must be uploaded",
            extension: "You must choose a file with one of the following formats: .png, .jpg, .jpeg, .pdf or .gif"
        }
    },

This is a duplicate of this question: https://stackoverflow.com/questions/30095103/jquery-validation-plugin-validating-multiple-input-files — Zizzyzizzy, Jul 30 '19 at 13:45
You absolutely cannot use an `id` in place of the `name` attribute with this plugin. There are **no workarounds** without editing the code of the plugin itself. — Sparky, Jul 30 '19 at 13:56
@Sparky Then with Becher Henchiri's method, I get it partially working. The require works, just not the extension part. — Paul, Jul 30 '19 at 14:00
Is the `name` unique? It must be unique. If it's `uploadedFile[1]`, `uploadedFile[2]`, etc., then you surround the name in quotes when declaring it. However, if you have multiple fields with identical name such as this, then the plugin will not work properly. — Sparky, Jul 30 '19 at 14:02
I set the rule like this: `"uploadedFile[]": {`. It will submit when there is a .doc file uploaded. I don't have the .doc extension enabled in the rule. — Paul, Jul 30 '19 at 14:05
Right... because his answer does not work. You cannot have duplicate names, and if you have multiple fields with `uploadedFile[]`, then you have duplicate names. Only the first field is validated and the rest are ignored. — Sparky, Jul 30 '19 at 16:16
@Sparky How do you get the other names to work then? I just eliminated the brackets from the name. — Paul, Jul 30 '19 at 16:25
The brackets are not the issue - the issue is the duplicated name. Again, each field must have a ***unique*** name. `uploadedFile[1]`, `uploadedFile[2]`, etc. will work exactly the same as `uploadedFile1`, `uploadedFile2`, etc. — Sparky, Jul 30 '19 at 18:27
@Sparky But how would I know the name of the file if I am adding more than one file? — Paul, Jul 31 '19 at 12:30
I have no idea how you're creating these additional fields, but you would add an index number when you create them. Please click each of the linked duplicate questions above. Some of them show you what you're asking about. — Sparky, Jul 31 '19 at 14:53

becher henchiri · Answer 1 · 2019-07-31T08:50:13.563

-2

try this:

$("#uploadedFileTest").change(function(){ $("#uploadedFileTest").blur().focus(); });

$.validator.addMethod(
            "validate_file_type",
            function(val,elem) {
                 var files    =   $('#'+elem.id)[0].files;
                for(var i=0;i<files.length;i++){
                    var fname = files[i].name.toLowerCase();
                    var re = /(\.pdf|\.jpg|\.jpeg)$/i;
                    if(!re.exec(fname))
                    {
                                return false;
                    }
                }
                return true;
            },
            "Please upload pdf or jog or jpeg files"
    );

$('#form').validate({
       rules: {
           "uploadedFile[]": {
                         required: true,
                         validate_file_type: true,
                         
                      }
       },
              
              messages: {
              
        "uploadedFile[]": {
            required: "A file must be uploaded",
            
        }
        }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>

<form id="form">
  
   <input type="file" name="uploadedFile[]" class="inputfile" id="uploadedFileTest" data-multiple-caption="{count} files selected" multiple>
 
    <input type="submit" />
</form>

edited Jul 31 '19 at 08:50

answered Jul 30 '19 at 13:43

becher henchiri

618
4
10

Thanks. I just tried that and the required is working, but when I put a different extension that shouldn't be allowed, it allows the submit. This error is generated in the console: `Uncaught TypeError: Cannot read property 'call' of undefined. Exception occurred when checking element uploadedFileTest, check the 'extension' method.`. – Paul Jul 30 '19 at 13:48
its good now i add validate_file_type filter – becher henchiri Jul 30 '19 at 14:03
Didn't help, it still submits. – Paul Jul 30 '19 at 14:05
no with my last update if i select jpeg with pdf and doc files,it don't allowed submit, because doc fil is not allowed, run a code snippet plz – becher henchiri Jul 30 '19 at 14:10
Gotcha. I didn't see the top part. Is there anyway to make the error message go away once the correct file type has been added? – Paul Jul 30 '19 at 15:29
yes , add this code $("#uploadedFileTest").change(function(){ $("#uploadedFileTest").blur().focus(); }); – becher henchiri Jul 30 '19 at 15:57
I tried adding that between the function you made and the validate function, but it didn't help. – Paul Jul 30 '19 at 16:11
i updated the code snippet try now, it's work – becher henchiri Jul 31 '19 at 08:52

How to use an id instead of a name in jquery validate rules

1 Answers1