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

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: stackoverflow.com/questions/30095103/… — Zizzyzizzy
– Zizzyzizzy, Commented Jul 30, 2019 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
– Sparky, Commented Jul 30, 2019 at 13:56
@Sparky Then with Becher Henchiri's method, I get it partially working. The require works, just not the extension part. — Paul
– Paul, Commented Jul 30, 2019 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
– Sparky, Commented Jul 30, 2019 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
– Paul, Commented Jul 30, 2019 at 14:05

becher henchiri · Accepted Answer · 2019-07-31 08:50:13Z

-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, 2019 at 8:50

answered Jul 30, 2019 at 13:43

becher henchiri

6774 silver badges11 bronze badges

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

8 Comments

Paul Over a year ago

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.

.

becher henchiri Over a year ago

its good now i add validate_file_type filter

Paul Over a year ago

Didn't help, it still submits.

becher henchiri Over a year ago

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

Paul Over a year ago

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?

|

Collectives™ on Stack Overflow

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

1 Answer 1

8 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Linked

Related