I have a signup form where user can enter, along other information, company's name and company's URL ID. Now, I'd like to suggest "URL ID" to the user so when he types "name", "URL ID" should be based on this input (very similar to Facebook "name" and "username" paradigms). I should also mention that user can manually type in "URL ID" for corrections after it was suggested.
It's important to mention here that based on this question I was able to successfully implement server-side validation for the "name" field using the following Regex expression (client-side validation is not needed):
/^[\p{L}\p{N}]+(?:[- \'\x26][\p{L}\p{N}]+| [\x26] [\p{L}\p{N}]+)*$/iu
There are certain rules that must be applied to URL IDs:
Valid characters are: both lower- and uppercase letters (Latin only), numbers, dashes, underlines and dots
Must begin and end with a letter or number
Must not have more than one special character (dash, underline or dot) in row
Can have multiple special characters in "URL ID"
As an example of what's valid and what's not, here are some examples:
Valid inputs
myusername
my.username12
my.user20_name
8-user-name-my
Invalid inputs
myuser20name.
_myusername10
my..username
myuser-.name
To make the long story short, two things need to be done:
while user is typing in/pasting the "name" field, I need to take input on-the-fly, keep only allowed characters discarding the rest, and filling in the "URL ID" field with the filtered input
while user is typing in/pasting the "URL ID" field, I need input to validates against the rules mentioned above so that for example typing in "my.user-" would be ok (although it would fail the server-side validation due to "-" being the last character), but typing additional "-" would not be allowed
I guess I only need the valid Regex expression, I'm able to code the rest myself. Any help would be appreciated.
I do not know if I understand all the rules, but according to his examples this regexp validates exactly what you need!
^[a-zA-Z0-9]+([-_\.][a-zA-Z0-9]+)*[a-zA-Z0-9]$
http://regexr.com?36f5b
Related
I have the following regex pattern on an HTML input field, which is supposed to hold an email address:
<input type="text" pattern="^\w+([.-]?\w+)*#\w+([.-]?\w+)*(\.\w{2,4})+$" /><br>
I furthermore have the same regex on an Express (JavaScript) backend using the following:
var re-email = new RegExp("^\w+([.-]?\w+)*#\w+([.-]?\w+)*(\.\w{2,4})+$")
if (!re-email.test(email)) {
validation = false
}
Although the regex are exactly the same, a specific test input is evaluated as true on the front-end while as false on the backend.
Why is this?
Solution (found after the initial post):
Instead of using "new RegExp" (which is not working) as above, include the Regex within forward slashes as below (which works).
var re-email = /^\w+([.-]?\w+)#\w+([.-]?\w+)(.\w{2,4})+$/
Probably not the answer you are after (not vue.js specific)...
Email address input validation should usually be completed like so:
<input type="email" name="" value="" required />
Specifying the correct "type" to an input field also adjusts input keyboards on mobile devices to make inputting an email address easier.
Your regular expression is poorly written and leads to "catastrophic backtracking" as well as not actually supporting valid email addresses.
Email address validation is generally complex, see this answer and associated question:
https://stackoverflow.com/a/201378/406712
You can also find the HTML email address validation equivalent regular expression in the HTML spec:
https://html.spec.whatwg.org/multipage/input.html#valid-e-mail-address
Also note you failed to escape the characters in the string, the first instance being the \w which without escaping the \ will appear as simply w.
Escaped the string it more like this:
'/^\\w+([.-]?\\w+)#\\w+([.-]?\\w+)(.\\w{2,4})+$/'
Is there any way of getting the inserted string(of any sort) from:
<input type="number" id='zipCode' name='zipcode' />
I'm trying to get value in console as:
console.log(document.getElementbyId('zipCode').value);
is giving just a blank output when any invalid string(string containing any alphabet or other special characters) is inserted which is also the same when actually left the field blank. But I want to retrieve the actual inserted value so that I can differentiate and validate the blank field with error message "Zipcode Field Empty!" and on invalid character string with error message "Invalid Zipcode!". Is there any way to retrieve any sort of inserted string from input type='number' field?
HTML input fields used for Zip Codes should be type=text and use the pattern attribute to provide hints to the browser
A numeric ZIP code is -- in a small way -- misleading.
Numbers should mean something numeric. ZIP codes don't add or subtract or participate in any numeric operations. 12309 - 12345 does not compute the distance from downtown Schenectady to my neighborhood.
ZIP codes aren't numbers -- they just happen to be coded with a restricted alphabet -- I suggest avoiding a numeric field. Same goes for credit card or social number
You can do <input type="text" pattern="\d*">. This will cause the numeric keyboard to appear on iOS (and Android?). Maybe it was pattern="[0-9]*"
"The semantically correct markup for a text field that can still
contain whitespace and other special characters is <input type="text" inputmode="numeric"/> however as far as I am aware while inputmode is
recommended by WhatWG it is not yet supported by any browsers. Its
intent is to present the user with a numeric keypad on a device that
has it but still behave as a text input." - davidelrizzo
From what I remember reading (example here - HTML5 input type=number value is empty in Webkit if has spaces or non-numeric characters?) there is no way of doing this with the input type set to number.
I want to check what users type in Textarea.
Actually, how can I restrict typing phone numbers and e mail addresses in description box?
So for example:
Hi, I am selling a Bugatti Veyron
Age: 2010
Color: Black
You can contact me on 066/656-656 or 055646646
or via mail mesell#domain.com
If someone tries to enter something like this I want to automatically remove
personal contact details.
So, please help, how can I do it?
Use Regex and do something like this :
Here's an example (jsFiddle)
HTML
<textarea></textarea><br>
<button>Test</button><br>
<span class="result"></span>
Javascript:
function validateEmail(email) {
var re = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
$('.result').html(re.test(email));
if(re.test(email)){
$('.result').html("Contain email");
} else {
$('.result').html("Do not contain email");
}
}
$('button').click(function(){
validateEmail($('textarea').val());
});
Note that I only look for email. But you can use other Regex to look for phone, you just have to search for something like "javascript regex phone" on Google.
you can try Regex as suggested, but take into consideration it's very hard to stop a phone number from being entered(unless you stop ALL numbers or know the exact form of the number taking place).
For example, stopping a xxx-xxxxxxx number is easy, but the user can type each digit with a space after it, which makes it much harder to stop(unless you again remove the option to type numbers.
As for emails, a simple regex to find a # followed by some text, a dot and 2 or 3 characters normally finds emails pretty easily. be advised people can still be creative in the way they put their emails(AT instead of # for example).
this should all be done server side, you can use javascript on the clientside to make it UI friendly.
For email validation:
<input type="email" name="email">
Here is an example: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_type_email
For Phone number validation:
use regex, it should be straight forward though.
Or just try isNAN(value) where value is the phone number enterd, will tell you if this is a number of not and then you can also put a check on number of digits.
Hope this helps!
I am try to validate a form to make the user enter their full name like the following..
First, Last
The user must have some string of alphabetic only chars, then a comma, then a space, then a last name, which can again be any string of chars.
This is my current regex..
var alphaExp = /^[a-zA-Z,+ a-zA-Z]+$/;
However, it lets the user submit something as simple as john. I want it to force them to submit something such as john, smith.
What you are doing is creating a character class ([]) that matches any of the following characters: a-zA-Z,+. This allows john to match the whole regex.
This is what you want:
/^[a-zA-Z]+, [a-zA-Z]+$/
However, I would like to advise you that making assumptions about names is a little wrong. What if some guy is named John O'Connor? Or Esteban Pérez? Or just Ng (only a first name)?
"Code that believes someone’s name can only contain certain characters is stupid, offensive, and wrong" - tchrist
Sure, you don't want to let people to enter just gibberish, but leave an option for users to enter something that doesn't necessarily fit your idea of correctness, but is nonetheless correct.
That's not how character sets work:
/^[a-zA-Z]+, [a-zA-Z]+$/
Things to consider:
Any validation you do on the client can be bypassed
Some people may have names with accented letters
Some cultures don't use just two names
^[a-zA-Z]+, [a-zA-Z]+$
Should work, however, do you want to prevent '.'? As in J. Hooker? And more words, like 'Jan van Hoogstrum'? Note also that you are preventing any accented characters being used. An option (although it allows underscores) is to use \w:
^(\w+ )$
Which would give you 'name name name...'. 'First, last' is not a common way to enter your name, so you'll frustrate a lot of users that way.
The correct regexp for allowing only the first letter to be capital would be:
/^[A-Z][a-z]+, [A-Z][a-z]+$/
I am having two text fields in my form. The data to be entered in the field are Name and City respectively. I want to check that the user has not entered any special symbols like !,#,#........ i.e, the only thing user should enter must be belonging to a-z,A-Z, though the user can enter Underscore(_), but no numbers, no special symbols.
I want to check this using JavaScript, how can this be achieved.
Thanks in advance.
A classic problem that's usually solved with the help of regular expressions.
var myString = "London";
if (myString.match(/^[a-zA-Z_]+$/)) {
// Success
}
If you want to allow spaces, like for New York, change the pattern to /^[a-zA-Z_\s]+$/.