Pure HTML input type text validation using pattern

Question

Recently I tried alot but I still unable to figure how should I able to validation for my text field. I hope I can get some help from here, my questions is I want to validate input text field only accept A-Z a-z 0-9 and space within word. And at least one char or number. For example, "abc def" , "abc092", "abcdef" Only in HTML input tag element . I tried this but this pattern unable to fullfil my requirements.

the pattern i want to achieve is

1) abc def 2) abcdef 3) abc123 4) a1b2c3 d4e5 5) allow to have empty space within words

the pattern i dont want to accept is

1) empty string 2) no alot of whitespace at the begining or end of the string 3) no bracket and etc special characters

Please show exactly what you have tried. Preferably as a minimal reproducible example — Jon P
– Jon P, Commented Dec 16, 2019 at 6:07
Helllo buddy why you deleted your Question about the JSON obj conversion!!?? — Rkv88 - Kanyan
– Rkv88 - Kanyan, Commented Feb 24, 2020 at 4:07

Jon P · Accepted Answer · 2019-12-16 11:19:57Z

1

Try

<input type="text" pattern="^\w+([\w ]*\w)*$">

Basically the break down is this:

\w+ - Select a word character ("A-z0-9") one or more times

()* - Select what's in here 0 or more times, which is

[\w ]*\w - Select a word character or space one or more times followed by another word character

No leading or trailing white space allowed. Only word characters allowed and internal spaces.

For some unit tests and breakdown of the regex see: https://regex101.com/r/7UnL9J/1

edited Dec 16, 2019 at 11:19

answered Dec 16, 2019 at 6:30

Jon P

19.9k8 gold badges52 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Divakar · Accepted Answer · 2019-12-15 14:08:27Z

0

You can use the Pattern attribute with regex but it is supported only in HTML 5. Like this " id="username" pattern="[A-Za-z0-9]+"

Check the below link for more information https://html.com/attributes/input-pattern/#Username_Patterns

answered Dec 15, 2019 at 14:08

Divakar

767 bronze badges

Comments

Bara Ahmad · Accepted Answer · 2019-12-15 14:15:56Z

0

Have you tried this?

<input type="text" pattern="[a-zA-Z0-9\s]+">

answered Dec 15, 2019 at 14:15

Bara Ahmad

213 bronze badges

1 Comment

You Unknown Over a year ago

for this pattern pattern="[a-zA-Z0-9\s]+" <--- this allow empty whitespaces. how can i validate it if it's a empty whitespaces?

Collectives™ on Stack Overflow

Pure HTML input type text validation using pattern

the pattern i want to achieve is

the pattern i dont want to accept is

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

the pattern i want to achieve is

the pattern i dont want to accept is

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related