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)*$/
    }
});

Answer 1

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.