HTML Field Type Input Number Only or Letter Only Without JavaScript

Question

I create a form, where one field should only be filled with numbers.

I want that field can be filled only with numbers since entering input.

Like this example :

How Can I Use Javascript to Allow Only Numbers to Be Entered in a TextBox?

I've tried using Regex, but when I try to input is still able to enter letters.

<input type="number" min="2" pattern="^[0-9]" class="andi_input required-entry" name="amount" id="amount" required title='Only Number' />

I want it when input to field and not after click the Submit button and the message appear and inform that the field can only be filled with numbers.

I also try to add validate-number, but the result is the same.

How, without javascript, so that the field can only be filled with numbers or letters?

Whether for this kind of case have to use JavaScript or is there another way without JavaScript?

You either use HTML5 validation which occurs on submit. Or you use Javascript (or a library that uses Javascript) — Shaun
– Shaun, Commented Nov 24, 2015 at 8:30
So had to use javascript? There is no other way without javascript? — Andhi Irawan
– Andhi Irawan, Commented Nov 25, 2015 at 4:47

Travis M · Accepted Answer · 2015-11-24 08:27:28Z

2

HTML 5 uses the type="number" so make sure that the browser that you are using is compatible. Check it out in action here.

answered Nov 24, 2015 at 8:27

Travis M

3632 silver badges11 bronze badges

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

2 Comments

Andhi Irawan Over a year ago

Thank you @travis-m for the reply / suggestion, but I mean / want is like this example How Can I Use Javascript to Allow Only Numbers to Be Entered in a TextBox?, where since the beginning of the input can not enter letters (numbers only), not after click Submit button

Andhi Irawan Over a year ago

Sorry @travis-m, I want to click 'This answer is useful' to your answer but my reputation score is still less.

Delphine · Accepted Answer · 2015-11-25 15:40:43Z

1

You should check browser compatibility. You're right with <input type="number" pattern="^[0-9]" />.

Your regex rule is : ^[0-9] :

^ assert position at start of the string
[0-9] match a single character present in the list below (0-9 a single character in the range between 0 and 9)

You can check your regex here.

I use to use HTML5 Validation and jQuery one because IE is capricious most of the time.

UPDATE :

Without Javascript it's not possible to check pattern on real time. I suggest you to use a jQuery library like : http://www.jqueryscript.net/form/jQuery-Plugin-For-Formatting-User-Input-with-Specified-Pattern-formatter-js.html.

edited Nov 25, 2015 at 15:40

answered Nov 24, 2015 at 8:35

Delphine

8989 silver badges24 bronze badges

4 Comments

Andhi Irawan Over a year ago

Thank you @delphine for the reply / suggestion, but I mean / want is like this example How Can I Use Javascript to Allow Only Numbers to Be Entered in a TextBox?, where since the beginning of the input can not enter letters (numbers only), not after click Submit button

Delphine Over a year ago

I understand but without Javascript it's not possible and it was mentionned in your post title. I suggest you to use a jQuery library like : jqueryscript.net/form/…. Script in the link is working for you ?

Andhi Irawan Over a year ago

Thank you @delphine, so the answer is without Javascript it's not possible :) I want to click 'This answer is useful' but my reputation score is still less. I'll accept your answer as an answer to approach the question.

Delphine Over a year ago

I updated my answer so everyone can see the good solution and maybe you can tick it !

user12531388 · Accepted Answer · 2022-01-04 12:22:55Z

0

Here is a OneLiner:

<input type="number" onkeypress="return /[0-9]/i.test(event.key)">

or

<input type="text" onkeypress="return /[a-z]/i.test(event.key)">

answered Jan 4, 2022 at 12:22

user12531388

Collectives™ on Stack Overflow

HTML Field Type Input Number Only or Letter Only Without JavaScript

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related