Validate File Type using Foundation Abide

Question

I'm looking to use Foundation's Abide plug-in to validate the type of file extension uploaded into a type="file" input tag, but I'm having troubles validating the check against the RegExp correctly.

html:

<div class="large-2 columns button">
    <input id="uploadResume" type="file" required pattern="resume" />
    <small class="error">PDF or Word Document only please</small>
</div>

javascript:

$(document)
    .foundation().foundation('abide', {
        patterns: {
        // check if the last 3 letters are acceptable
        resume: /^.(doc|DOC|pdf|PDF)*$/
    }
});

Check my answer as probably the regex you provide are causing you troubles, if not what error you get? — Tafari, Dec 03 '13 at 08:07
@tafari I tried using both of your examples provided below, I believe your response is correct but it is possible that the way I am calling the function might be incorrect as it errors as soon as I click the File input. I click the input, immediately get the error as soon as my file select appears which stays even after a correct .pdf,.PDF,.doc or .DOC has been selected. I believe the issue is now with my abide jquery calling for file input — Dylan, Dec 03 '13 at 15:09
you are trying to validate the **file** with your **pattern**, I would suggest to try the **pattern** I gave you first on a simple **text input** like for example: `input type="text" pattern="resume" required>` and see if it works there, if yes then it has something to do with the **input type**. Just check it, if it fails as well, we will need to go deeper :> Cheers and good luck! — Tafari, Dec 03 '13 at 17:24
@Tafari I swapped the file input to a text input to test your idea, unfortunately it's looking like there is something wrong with the regExp. Just to double check it wasn't the Abide call in the javascript I copied their alpha-numeric redExp & gave it a custom name, then called it on the input which worked. I am still worried about it not working at all for file type inputs, but let's get the text input version working first and see — Dylan, Dec 03 '13 at 18:08
try using the named patterns without the forward slashes `/` at the **beginning** and at the **end**, wonder if it helps :? I have also checked [Abide foundation docs](http://foundation.zurb.com/docs/components/abide.html) and referring to it you have to define your named **patterns** like this: `By overriding Abide during Foundation initilization, you can define your own custom patterns or override the default patterns to validate against.`Actually it looks like you are doing it right but that might be a problem, try using the **pattern** directly in the **input** without naming it. — Tafari, Dec 03 '13 at 19:13
@Tafari This is 110% The correct answer. Inline pattern defining without the slashes on either side of the regExp fixed it. Even after validating it within their custom pattern override during foundation initialization, it still wouldn't work that way it had to be done inline. I tested the inline with a `type="file"` and it worked perfectly, by the way. If you want to rewrite your answer i'll upvote and choose it. This is the working input: ``. Thank you so much for your help. — Dylan, Dec 03 '13 at 19:46
okay mate I guess there is some bug or something not really clear on Stackoverflow, just **DON'T** upvote the answer at all ; ) Thanks and cheers! — Tafari, Dec 04 '13 at 15:54

Tafari · Accepted Answer · 2013-12-03T20:36:37.020

For now you are trying to match any one character followed by the mentioned extenions, so try this pattern:

PATTERN

/\.(doc|DOC|pdf|PDF)$/

It will match only dot followed by any of mentioned extensions, so the possibilities will be:

.doc
.DOC
.pdf
.PDF

But if you want to match whole filename + extension use this:

PATTERN

/^.+?\.(doc|DOC|pdf|PDF)$/

Added .+? after ^ which means 'match any character except new line 0 or more times until satisfying the next token, added also \. to match a dot before extenion. I also removed * which is not needed and would cause repeating extenions.

Examples

filename.PDF

This file will be matched.

filename.exe

This will be not matched.

FINAL ANSWER

Using 2nd pattern as inline pattern:

<input type="file" required pattern="^.+?\.(doc|DOC|pdf|PDF)$" />.

Apparently there is some issue while using inline patterns which forces you to remove the forward slashes both at the beginning of the pattern and at the end of it. Also the named patterns seem to work well weird and I'm not surely why is that.

Validate File Type using Foundation Abide

1 Answers1