I'm working on a simple check for my input fields. I got 3 places where I'm validating user-input: javascript regex, html pattern and php regex. The Javascript and PHP part work fine, but my HTML pattern somehow returns an error for every input except blank. I tested it on regexpal.com (regex tester) and it works perfectly fine there, so I reckon I must be doing something wrong.
Here's my regex:
/^[a-zA-Z0-9\!\?\,\.\s]{0,50}$/
I'm trying to allow users to input the following:
Alphabetic characters, including capitals
Numeric characters
Puncation: exclamation(!), question(?), comma(,) and dot(.)
Spaces
Here's how I implement it:
<input type="text" id="name" name="name" aria-required="true" pattern="/^[a-zA-Z0-9\!\?\,\.\s]{0,50}$/" value="loaded value from db">
Please note: I'm allowing 0 characters to be entered because I will check it with PHP, and if the input field(s) is/are empty, a pre-set value will be written to the database.
Basically it should allow users to enter general words or sentences, but somehow it doesn't allow anything. The only way I don't get an "error" is when I leave the inputfield blank. What am I doing wrong? Is my regex wrong? Am I not implementing it correctly? I can provide more code if necessary.
Help is much appreciated!
Thanks in advance.
Try removing the forward slashes (/) from the input's pattern attribute.
Related
Try check if input filed start with blank space, after testing e few hours and searching and testing a lot of patterns, found on internet, it doesn't work.
What i want: check if html5 input field start with character (no blank space), but in the text are blank spaces allowed.
At the moment the best solution i found, but it doesn't work:
<input type="text" class="naamveld" placeholder="Fullname" pattern="^\S+$" required>
Someone can help me with this 'simple' thing?
You should use a regular expression like this:
^[^-\s][\w\s-]+$
like it is explained in this question
According to your question, you said you wanted to remove all the whitespaces in the input, try this:
<input type="text" class="naamveld" placeholder="Fullname" required onkeydown="this.value = this.value.trim()" onkeyup="this.value = this.value.trim()">
If you try adding spaces at the beginning and end of the input, it will remove them.
How it works
The input has two attributes, (onkeydown and onkeyup) these functions will perform when the input receives a keyup or keydown, and will remove all whitespaces from the value of the input using this.value = this.value.trim()
If you want to learn more on how the trim() function works, you can go here.
First of all, again sorry for my bad english :-s
I want thanks everyone for all this useful info. When looking to the answers and solutions, with our help this is the solution (see pattern):
<input type="text" pattern="^\S.*$" ...>
Checked if input field started with blank space(s).
This is for me the best and simplest solution :-)
I am developing a view using html5, I want to validate a VIN field with some particular regex pattern,
So I used data-val-regex-pattern to achieve this.
My validation is to not allow the user to enter i,o,q,I,O,Q he can enter anything in a-zA-Z0-9
So I have written the regex as ^[a-zA-Z0-9&&[^iIoOqQ]]$this regex is not working.
Not working mean when ever I enter ghtygfrt9090 it is saying invalid.
Below is the code:
<input type="text" maxlength="17" data-val-regex-pattern="^[a-zA-Z0-9&&[^iIoOqQ]]$" data-val-regex="VIN is not valid">
Please help !!
The pattern you tried ^[a-zA-Z0-9&&[^iIoOqQ]]$ does not have a quantifier for the character class and if supported will match only a single occurrence of the listed.
Repeating it would look like ^[a-zA-Z0-9&&[^iIoOqQ]]+$
In some regex engines, you could use character class intersection using $$
If it is not supported, you could make use of a negative lookahead:
^(?!.*[iIoOqQ])[a-zA-Z0-9]+$
Regex demo
Another option is to update the ranges excluding the chars
^[a-hj-npr-zA-HJ-NPR-Z]+$
Regex demo
I'm sure someone will mark this as a duplicate question but no other answers worked for me.
I am using ruby and passing a variable into my html page. Let's say my variable "camp_name" is equal to "abc'd"
<%=camp_name%>
This outputs "abc'd" which is what I want.
<input type="text" class="form-control" name="campaign_name" required value='<%=camp_name%>'>
The value in the field is now "abc" because of the single apostrophe. How do i get it to ignore apostrophes? Thanks.
You can escape the variable to html entities:
camp_name.gsub("'", "'")
You should do that for other characters as well, because, as mentioned by a comment, the user could simply insert an HTML tag in your page with your current script. Probably the most important ones are the following:
camp_name.gsub("<", "<")
camp_name.gsub(">", ">")
If you're using Rack (which would definitely be in use if you're using Rails or Sinatra, and it might be there even if you're not), there is a builtin for escaping HTML for just this kind of thing. Calling Rack::Utils#escape_html will replace ampersands, brackets, and quotes with their HTML entities (e.g. ' instead of ').
In your case, you'd want the following code:
<input type="text" class="form-control" name="campaign_name" required value='<%= Rack::Utils.escape_html(camp_name) %>'>
This would evaluate to:
<input type="text" class="form-control" name="campaign_name" required value='abc'd'>
which is the proper way of displaying an apostrophe in HTML.
Just as a side note, displaying user-submitted text without escaping on a website is a very bad idea, because malicious users can add arbitrary Javascript that could render your site useless, add advertisements, and more. You should definitely get into the habit of escaping any text that users can submit before displaying it, either by gsubing manually or using a helper method like this.
Is it real to set input pattern to all as usually, but with one exception: url are not acceptable. I mean for example all input patterns are ok, but:
ftp://example.com
http://example.com
https://example.com
we could not enter...
is it real to do without using javascript or no ?
With JavaScript and using the regex found here: What is the best regular expression to check if a string is a valid URL?, you could do something like this:
function isValid(inputVal){
return !/((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+#)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+#)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%#.\w_]*)#?(?:[\w]*))?)/.test(inputVal);
}
isValid(document.getElementById("inputID").value);
EDIT
Without JavaScript you can do it like such
<input pattern="^(?!((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+#)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+#)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%#.\w_]*)#?(?:[\w]*))?))" >
^ # start of the string
(?! # start negative look-ahead
.* # zero or more characters of any kind (except line terminators)
foobar # foobar
)
Choose the URL validation regex from internet ( or write your own :) ).
Put it in negative look-ahead (?!).
Add .* for match everything else.
Use your new regex in pattern attribute of the inputs.
For example if the URL validation regex is ^(((https?)|(ftp)):\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$ the inputs will be like
<input type="text" pattern="^(?!(((https?)|(ftp)):\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?).*$" />
Note: not every regex will work if you add it in negative look-ahead so just use JavaScript and inverse the result of the original regex. Also your input must be inside a form to trigger the patern validation (on form submit).
The question indicates you already know the regex and just want to know whether you should be using Javascript (or HTML) for this. The answer would be: probably not.
If you are filtering input for - say - a forum, using Javascript would be a bad idea because it runs locally, so the user can easily avoid the check. Use a server-sided language (most-probably PHP) to do the check.
I can't seem to get the pattern attribute to work for the HTML form validation. I have seen a lot of tutorials and it all says the same and it works for them. Though I am using the same technique as the tutorials, I can't get it to work. For an example, please see the below code.
<label for= "firstname" id="firstname">First Name*</label>
<input type="text" name="firstname" pattern="[A-Za-z]" title="Only Alphabets" required/>
I want only alphabets to be inserted into this text box. When I insert numerals, it does ask to match the requested format which is only alphabets. But even when I enter alphabets it shows the message though it is supposed to let me submit the form. I tried all I can but can't seem to find a solution for this due my lack of knowledge. I would really appreciate if you could let me know how to enter only numbers into a field, only alphabets into a field, numbers and alphabets into a field using the pattern attribute for validation. Moreover, I was wondering whether the pattern attribute would be able to help me with this as well. For the National ID text box, I want the user to insert data in a specific format. Like this "A000000". An A in the first followed by 6 digits and if this format is not followed, then to display the message asking to match the requested format. Thank you so much in advance. (Please keep note that I am not using jquery).
Edit
May I please know how to add ' (apostrophe) along with the alphabets? Moreover pattern="[A-Za-z]+" wont let me insert spaces between words. How do I fix that?
The pattern field uses regular expressions. Try:
pattern="[A-Za-z]+"
For the national ID you could use:
pattern="A[0-9]{6}"