HTML5 form validation pattern alphanumeric with spaces?

Question

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.

score 106 · Accepted Answer · answered Oct 27 '13 at 14:57

106

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]+"

answered Oct 27 '13 at 14:57

Lachezar

6,523
3
33
34

Just what i was looking for, thanks. Could you explain what the differce is between any kind of space with `\s` and just the ` ` space. – RTB Oct 27 '13 at 15:21
4

`\s` is a class containing tab and space characters. – Lachezar Oct 27 '13 at 15:24
if i type only spaces,then it accepts.whats should be my pattern which accepts spaces but not if ONLY space is entered? – rack_nilesh Jan 28 '15 at 07:01
1

This will not work with diacritics, i.e.: `ą, ó, ä, ö` – bumerang Jul 14 '16 at 13:38
@bumerang how could we easily include those? – Julix Oct 13 '16 at 16:20
@Julix check out my answer bellow – bumerang Oct 14 '16 at 08:34

score 42 · Answer 2 · answered Oct 14 '16 at 08:34

42

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

answered Oct 14 '16 at 08:34

bumerang

1,776
21
30

that's really neat, never saw that before. -- managed to found it, now that I know what it's called: http://stackoverflow.com/a/30225759/2848941 Very useful, thanks! – Julix Oct 14 '16 at 17:31
What I had been using before (and it seemed to work, but I don't understand it, was this: [a-zA-Z\u00c0-\u00d6\u00d8-\u00f6\u00f8-\u024f ]+ – Julix Oct 15 '16 at 14:47
1

You can simply use `max-length` and `min-length` attributes instead of using the `{2,}` bit. Regardless I like this answer; especially for the clarifications you took the time to make, +1. – John Sep 05 '17 at 01:17
please don't forget apostrophes. Us Irish take the brunt of this anti apostrophe discrimination! – eddyoc Oct 08 '19 at 07:39
@eddyoc Can you then please provide in comment, or in my answer edit necessary characters range? – bumerang Oct 08 '19 at 14:23
@eddyoc or you just mean this sign `'` – bumerang Oct 08 '19 at 14:25

score 10 · Answer 3 · edited Oct 06 '16 at 07:07

10

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

edited Oct 06 '16 at 07:07

Dmitriy

4,475
3
29
37

answered Mar 19 '15 at 16:22

whitepolkydots

101
1
2

1

Or I believe you can just include the 'required' attribute to circumvent that. – Oct 21 '15 at 06:45
4

@user1893702 The required attribute will accept spaces. You're Gonna Need a Bigger Regex. – Christophe Roussy Apr 11 '17 at 09:33

score 10 · Answer 4 · answered Feb 26 '18 at 18:28

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 ą, ó, ä, ö.

score 4 · Answer 5 · edited Sep 17 '15 at 17:47

4

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]*"

edited Sep 17 '15 at 17:47

rink.attendant.6

44,500
61
101
156

answered Sep 17 '15 at 17:30

ab_wanyama

177
1
3

score 1 · Answer 6 · answered Mar 01 '21 at 05:30

<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>

<hr> 
<p>
<h2>Number only</h2>
<input type="tel" name="PhoneNumber" onkeyup="this.value=this.value.replace(/[^0-9]/g,'');" />
</p>
<hr> 
<p>
<h2>Alphabets only</h2>
<input type="text" name="name" onkeyup="this.value=this.value.replace(/[^A-z]/g,'');" />
</p>

score 0 · Answer 7 · answered Jun 28 '18 at 11:35

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(); 
    }
})

Characters 91 to 96 are special characters. Should be event.preventDefault(); for that range — Dazza, Oct 26 '22 at 10:46

Nikhil Surkar · Answer 8 · 2017-10-24T11:04:49.913

-1

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"

edited Oct 24 '17 at 11:04

answered Oct 24 '17 at 06:41

Nikhil Surkar

19
1

The question seems to be looking for a validation pattern. Also, please note that keyboard event properties like `charCode`, `keyCode`, and `which` will be deprecated and replaced by `key`: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key – stealththeninja Oct 24 '17 at 07:05

HTML5 form validation pattern alphanumeric with spaces?

8 Answers8

Linked