First Name Validation Using HTML 5 Pattern

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:


<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

<input id="first name" name="first_name" required pattern="[a-zA-ZÀ-ÖØ-öø-ÿ.+ -]+">

Regular expression for detecting first name and/or last name

I recommend you to use this pattern:

^([A-Za-z]+[,.]?[ ]?|[A-Za-z]+['-]?)+$


<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

Leave a reply