HTML5 form validation pattern alphanumeric with spaces?

RegexHtmlValidationFormsAlphanumeric

Regex Problem Overview


I have the following input tag in my html5 form:

<p>
    <label>Company Name*</label>
    <input type="text" name="name" class="field" required pattern="[a-zA-Z0-9]+" />
</p>

This works just fine checking if the company name consists out of alphanumeric characters. But of course I want to allow spaces in the company name. I need to know what I should add to the pattern.

Regex Solutions


Solution 1 - Regex

How about adding a space in the pattern attribute like pattern="[a-zA-Z0-9 ]+". If you want to support any kind of space try pattern="[a-zA-Z0-9\s]+"

Solution 2 - Regex

My solution is to cover all the range of diacritics:

([A-z0-9À-ž\s]){2,}

A-z - this is for all latin characters

0-9 - this is for all digits

À-ž - this is for all diacritics

\s - this is for spaces

{2,} - string needs to be at least 2 characters long

Solution 3 - Regex

To avoid an input with only spaces, use: "[a-zA-Z0-9]+[a-zA-Z0-9 ]+".

eg: abc | abc aBc | abc 123 AbC 938234

To ensure, for example, that a first AND last name are entered, use a slight variation like

"[a-zA-Z]+[ ][a-zA-Z]+"

eg: abc def

Solution 4 - Regex

It's quite an old question, but in case it could be useful for anyone, starting from a combination of good responses found here, I've ended using this pattern:

pattern="([^\s][A-z0-9À-ž\s]+)"

It will require at least two characters, making sure it does not start with an empty space but allowing spaces between words, and also allowing special characters such as ą, ó, ä, ö.

Solution 5 - Regex

Use this code to ensure the user doesn't just enter spaces but a valid name:

pattern="[a-zA-Z][a-zA-Z0-9\s]*"

Solution 6 - Regex

enter image description here

<h1>In my case, I need only Number and I hafta stop to user entering any Alphabets. We can also stop to entering any number.</h1>


Number only


Alphabets only

Solution 7 - Regex

Use Like below format code

$('#title').keypress(function(event){
    //get envent value       
	var inputValue = event.which;
    // check whitespaces only.
	if(inputValue == 32){
		return true;	
	}
	 // check number only.
	if(inputValue == 48 || inputValue == 49 || inputValue == 50 || inputValue == 51 || inputValue == 52 || inputValue == 53 ||  inputValue ==  54 ||  inputValue == 55 || inputValue == 56 || inputValue == 57){
		return true;
	}
    // check special char.
    if(!(inputValue >= 65 && inputValue <= 120) && (inputValue != 32 && inputValue != 0)) { 
        event.preventDefault(); 
    }
})

Solution 8 - Regex

Use below code for HTML5 validation pattern alphanumeric without / with space :-

for HTML5 validation pattern alphanumeric without space :- onkeypress="return event.charCode >= 48 && event.charCode <= 57 || event.charCode >= 97 && event.charCode <= 122 || event.charCode >= 65 && event.charCode <= 90"

for HTML5 validation pattern alphanumeric with space :-

onkeypress="return event.charCode >= 48 && event.charCode <= 57 || event.charCode >= 97 && event.charCode <= 122 || event.charCode >= 65 && event.charCode <= 90 || event.charCode == 32"

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionRTBView Question on Stackoverflow
Solution 1 - RegexLachezarView Answer on Stackoverflow
Solution 2 - RegexbumerangView Answer on Stackoverflow
Solution 3 - RegexwhitepolkydotsView Answer on Stackoverflow
Solution 4 - RegexAlb-CView Answer on Stackoverflow
Solution 5 - Regexab_wanyamaView Answer on Stackoverflow
Solution 6 - RegexVinod KumarView Answer on Stackoverflow
Solution 7 - RegexSelvamani PView Answer on Stackoverflow
Solution 8 - RegexNikhil SurkarView Answer on Stackoverflow