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)*$/
}
});
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.
Related
I'm trying to match only GitHub URLs with the following input tag:
<input type="url" id="repoUrl" title="Must be a full URL to a GitHub repository" pattern="^https:\/\/github\.com\/" required>
In regex101 this exact pattern is matching all strings that start with "https://github.com" which is what I want, but the problem is that when I call the checkValidity() method on that input, it only says it's valid if the input is only "https://github.com".
What do I need to change to make this regex work how it works in regex101?
try to add .* in the end of a pattern
pattern="^https:\/\/github\.com\/.*"
I currently use a regex pattern that prevents = being used in form entries. I wish to extend this to only allow form entries in this fields from certain urls? How can I add a wildcard domain regex entry AND maintain using the other = pattern?
<input name="url" pattern="[^=]+" type="url" placeholder="Amazon URL" required>
VALID ENTRIES
https://www.amazon.co.uk/dp/B01DFKBL68
https://www.amazon.co.uk/dp/B07H3NY1H6/
https://www.amazon.co.uk/b/ref=footer_topup_uk?ie=UTF8&node=13958953031&tag=deals70-21
INVALID ENTRIES
https://www.amazon.com/Disc-O-Bed-Large-with-Organizers-Black/dp/B01GSA9O3O
https://www.google.com
Here is what I have so far, which isn't working:
pattern="[^=|https://www.amazon.co.uk/*]+"
You may use
pattern="(?!https://www\.amazon\.co\.uk/)[^=]+"
The HTML5 pattern regex is automatically put inside ^(?: and )$, so it will look like ^(?:(?!https://www\.amazon\.co\.uk/)[^=]+)$:
^(?: - start of string and of a non-capturing outer container group
(?!https://www\.amazon\.co\.uk/) - the string cannot start with https://www.amazon.co.uk/
[^=]+ - one or more chars other than =
)$ - end of the non-capturing group and the end of the string.
.*(\d{3}\-\d{3}\-\d{2}\-\d{2}|\d{3}\-\d{2}\-\d{2}\-\d{3}|\d{10}).* this pattern was working fine. But suddenly it stop working in chrome and opera lately. What's going on here ? What a problem is here and how it's wrong? Opera is informing about invalid escape, same in chrome. It works fine when im checking it in js.
<form>
<input type="text" pattern=".*(\d{3}\-\d{3}\-\d{2}\-\d{2}|\d{3}\-\d{2}\-\d{2}\-\d{3}|\d{10}).*">
<button>
Send
</button>
</form>
The point is that Chrome and Firefox already support ES6 regex specifications and support the Unicode mode by default.
Unicode patterns have stricter rules as to what characters can be escaped inside the pattern. See this reference:
IdentityEscape: In BMP patterns, many characters can be prefixed with a backslash and are interpreted as themselves (for example: if \u is not followed by four hexadecimal digits, it is interpreted as u). In Unicode patterns that only works for the following characters (which frees up \u for Unicode code point escapes): ^ $ \ . * + ? ( ) [ ] { } |
The same set of chars is referred to as SyntaxCharacter in the ES6 specs page.
So, you can only escape the - inside the character class where it is considered a special character and to make it a literal you can escape it. Everywhere else it must not be escaped.
<form>
<input type="text" pattern=".*(\d{3}-\d{3}-\d{2}-\d{2}|\d{3}-\d{2}-\d{2}-\d{3}|\d{10}).*">
<input type=Submit>
</form>
Try to use below concept to implement to validate the date format
<form onsubmit="alert('Submitted.');return false;"><input required="" pattern="(0[1-9]|1[0-9]|2[0-9]|3[01]).(0[1-9]|1[012]).[0-9]{4}" value="" name="dates_pattern0" id="dates_pattern0" list="dates_pattern0_datalist" placeholder="Try it out." type="text"><input value="ยป" type="submit"></form>
you can find more validations by this link - http://html5pattern.com/Dates
I have to set some rules on not accepting wrong url for my project. I am using regex for this.
My Url is "http ://some/resource/location".
This url should not allow space in beginning or middle or in end.
For example these spaces are invalid:
"https ://some/(space here in middle) resource/location"
"https ://some/resource/location (space in end)"
"(space in starting) https ://some/resource/location"
"https ://(space here) some/resource/location"
Also these scenario's are invalid.
"httpshttp ://some/resource/location"
"https ://some/resource/location,https ://some/resource/location"
Currently I am using a regex
var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*#)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%#!\-\/]))?/;
This regex accepts all those invalid scenarios. I am unable to find the correct matching regex which will accept only if the url is valid. Can anyone help me out on this?
We need to validate n number of scenarios for URL validation. If your particular about your given pattern then above regex expression from other answer looks good.
Or
If you want to take care of all the URL validation scenarios please refer In search of the perfect URL validation regex
/(ftp|http|https){1}:\/\/(?:.(?! ))+$/
is this regex OK ?
use this
^\?([\w-]+(=[\w-]*)?(&[\w-]+(=[\w-]*)?)*)?$
See live demo
This considers each "pair" as a key followed by an optional value (which maybe blank), and has a first pair, followed by an optional & then another pair,and the whole expression (except for the leading?) is optional. Doing it this way prevents matching ?&abc=def
Also note that hyphen doesn't need escaping when last in the character class, allowing a slight simplification.
You seem to want to allow hyphens anywhere in keys or values. If keys need to be hyphen free:
^\?(\w+(=[\w-]*)?(&\w+(=[\w-]*)?)*)?$
I need to show the name of the currently selected file (in <input type="file"> element).
Everything is fine, the only problem is I'm getting this kind of string "C:\fakepath
\typog_rules.pdf" (browset automatically puts this as value for the input element).
When I try to split the string by '\' or '\\' it fails because of unescaped slashes. Attempts to match/replace slashes fails too. Is there a way around this? I need this to work at least in Opera and IE (because in other browsers I can use FileReader)
E.G. I'm getting "C:\fakepath\typog_rules.pdf" as input and want to get "typog_rules.pdf" as output.
For security reasons, it is not possible to get the real, full path of a file, referred through an <input type="file" /> element.
This question already mentions, and links to other Stack Overflow questions regarding this topic.
Previous answer, kept as a reference for future visitors who reach this page through the title, tags and question.
The backslash has to be escaped.
string = string.split("\\");
In JavaScript, the backslash is used to escape special characters, such as newlines (\n). If you want to use a literal backslash, a double backslash has to be used.
So, if you want to match two backslashes, four backslashes has to be used. For example,alert("\\\\") will show a dialog containing two backslashes.
Escape the backslash character.
foo.split('\\')
I think this is closer to the answer you're looking for:
<input type="file">
$file = $(file);
var filename = fileElement[0].files[0].name;
Slightly hacky, but it works:
const input = '\text';
const output = JSON.stringify(input).replace(/((^")|("$))/g, "").trim();
console.log({ input, output });
// { input: '\text', output: '\\text' }
Add an input id to the element and do something like that:
document.getElementById('inputId').value.split(/[\\$]/).pop()