First name validation using html 5 pattern
You need to specify how long the pattern should be. pattern="[A-Za-z]{1,32}"
echo '<input type="text" maxlength="32" name="first_name" pattern="[A-Za-z]{1,32}" value="'.$_SESSION['user_first_name'].'" required>';
html5 pattern for first and last name
1. What is a first name? Do you mean a given name? If so, please remember that only a part of the global population writes their family names as last names. You really should use the terms "given name" and "family name". Think about »Ai Weiwei« – the family name is »Ai«.
2. There are just too many options for names. [a-zA-Z ]
does not even cover all North American or European names (think about »O'Doyle«). Family names may also contain a space character (as in »Mac Amhlaidh«). Staying with latin, what about French, Spanish or German names with accents or umlauts? And what about non-latin names? You know Владимир Путин?
3. You really should use two distinct input fields. Do not use a regular expression on something that irregular like a persons name.
HTML5 phone number validation with pattern
How about this? /(7|8|9)\d{9}/
It starts by either looking for 7 or 8 or 9, and then followed by 9 digits.
HTML5 Form Validation With the “pattern” Attribute
The pattern (regular expression) is slightly wrong as you haven't escaped all your special characters such as the .
and have some unnecessary parts within it. Try using the following slightly modified pattern instead:
([a-z]|[0-9])+@student\.[a-z]+\.edu\.vn
<form> <input type="text" name="mail" pattern="([a-z]|[0-9])+@student\.[a-z]+\.edu\.vn" /> <input type="submit"></form>
Regex for HTML name input validation is not working
First of all, you need to use a string regex pattern, not a regex literal in the HTML pattern
attribute, and you do not have to use the case insensitive modifier as the a-zA-Z
and À-ÖØ-öø-ÿ
ranges include both lower- and uppercase letters.
Next, you are using ^
and $
anchors, but the HTML pattern
attribute anchors the match by default, it compiles the pattern with ^(?:
in front and )$
at the end of the given pattern string. So, they are redundant here. Same as one of the +
, or both, it is not clear if you want to allow the +
symbol or not in the user input. If you do, just keep one occurrence.
Moreover, you do not need to escape the .
inside square brackets, and -
can be moved to the end of the character class so that you do not have to escape it.
So, you can use
<form>
<input id="first name" name="first_name" required pattern="[a-zA-ZÀ-ÖØ-öø-ÿ.+ -]+">
<button>Submit</button>
</form>
Regular expression for detecting first name and/or last name
I recommend you to use this pattern:
^([A-Za-z]+[,.]?[ ]?|[A-Za-z]+['-]?)+$
Final:
<input name="BusinessOwner" type="text" id="BusinessOwner" pattern="^([A-Za-z]+[,.]?[ ]?|[A-Za-z]+['-]?)+$">
Hope this would be helpfull.
HTML5 Validate Input to accept alphabets only
You are allowing only ONE character. You missed the +
sign:
<input pattern="[a-zA-Z]+" oninvalid="setCustomValidity('Please enter on alphabets only. ')" type="text" class="form-control" name="first_name" placeholder="Firstname">
As @le_m said in comments, you can write *
wildcard to allow empty input:
<input pattern="[a-zA-Z]*" oninvalid="setCustomValidity('Please enter on alphabets only. ')" type="text" class="form-control" name="first_name" placeholder="Firstname">
Related Topics
Angular: Using the Ternary Operator in HTML Template
What to Do Regular Expression Pattern Doesn't Match Anywhere in String
Can Multiple Different HTML Elements Have the Same Id If They'Re Different Elements
How to Overlay One Div Over Another Div
≪Meta Charset="Utf-8"≫ VS ≪Meta Http-Equiv="Content-Type"≫
How to Position Text Over an Image With Css
Change the Background Color When an Input Is Checked
How to Hide a Text and Make It Accessible by Screen Reader
Applying a Background to ≪Html≫ And/Or ≪Body≫
How to Make CSS Grid Items Take Up Remaining Space
How to Stop Background from Jumping to the Top on Modal Toggle
Css Margin Terror; Margin Adds Space Outside Parent Element
Best Way to Center a ≪Div≫ on a Page Vertically and Horizontally
How to Position My Div At the Bottom of Its Container
How to Make a Div Fill a Remaining Horizontal Space
How to Set Max-Length in an Html5 "Input Type=Number" Element