An alternative to the solutions presented is to block only the sending of the form with the validation attributes HTML5, not the user input.
In fact, there is no way to guarantee that the entered data is in accordance with the forecast, if the user wants to mess up he will do it. If you have Javascript disabled in your browser and you have a script validation, it would go smoothly. If he wants to inspect the source code of the page and modify some attribute in HTML or a function in a JS file dealing with validation, he would also pass a good.
That’s why on the server there must be other checks, this subject has generated up to a question about validation efficiency only in the client-side. The validation in client is only an attempt to save resources and avoid making random requests to the server.
Returning to the validation attributes, one of the main advantages is to eliminate the need to use Javascript to validate fields. On the other hand, there is the good bad and old story of limited support in some browsers, so my answer may not be the best solution depending on the users who access (or can access) your page.
first solution: type='text'
attribute-ridden pattern
One way is to define the attribute pattern
field to accept only numbers.
<input type='text' pattern='\d*'/>
Solution 2: Use a field of the type number
Semantically, this would be the best option to create a field that accepts only numbers, no doubt. However, again comes the question of compatibility and the support to the fields type='number'
is terrible.
<input type='number'/>
You can even use the selector :invalid
to inform the user what type of data is expected in that field:
p {
color: #ea6153;
display: none
}
input:invalid + p {
display: inline
}
<input type='text' pattern='\d*'/>
<p>Ei! Este campo só pode ter números.</p>
Concluding
Validations with HTML is something recent, this explains the limited support in some browsers. But I look forward to the implementations of this resource since it entered the specification, we just need to give it a little more time.
In the same way that we used to use Javascript in the old days to make animations, no matter how simple they were - Today we do this elegantly only with CSS3 - soon we will be using HTML only to limit entries in a field.
The Can I Use? is a great site to track the compatibility of a Feature. There are libraries like the Modernizr that are there to detect these Features and help the developer make use of polyfill or what already exists natively.
Thank you. I’m editing with a way to really block the entrance, that’s what it refers to?
– Samir Braga
He only wants numbers, and he’s not allowing numbers. I just put one
!
in front of the expression!/[0-9]/g
and I guess that’s right....– gustavox
Ah, I don’t know where I was in the head rsrsrs. You’re right. But in case you just change the text of Alert, the rest is in agreement. In the question there is statement within Alert, "Letters only".. And I edited the answer. Take a look.
– Samir Braga
@Samirbraga thank you very much, my goal is to even block the entrance, the Alert is only for testing
– luis figueiredo
@luisfigueiredo, if it has served perfectly. you can "accept" the answer, so the problem will be taken as solved.
– Samir Braga
thank you very much, it was very helpful
– luis figueiredo
This is confused: "I want to do a function that doesn’t let me enter numbers into a textbox." The title says it’s just number, the body says it’s not for by number.
– Bacco
Samir, is what @Bacco is saying, according to the question is the opposite!
– gustavox
I understand @gustavox, I did according to the body. In itself
alert()
has "Only lestras". I had understood that the author wanted so, "my goal is to even block the entry, the Alert is only for testing"...– Samir Braga
And I went now to look at my edition in the question, and it’s really confusing, because in the title I edited was "Bootstrap Cancel the insertion of numbers in textbox ", and I changed because in the question was " I want to make a function that nay let me enter numbers "but at the moment I didn’t even realize the contradiction...
– gustavox
Yes Samir, I only touched myself because I edited the question, but now I don’t even know what the AP wants anymore, it would be interesting for him to clarify better. @luisfigueiredo
– gustavox
I added an option according to the title. Anyway, it’s there..
– Samir Braga
Very good Samir, and for not being able to give you +1 again, hold there my congratulations on the full answer. : -) By the way, I don’t even know if my edition in the title is correct, or if the body of the text is incorrect. I hope that the AP goes back to the site and clarify... and that marks the answer as accepted, obv.
– gustavox
Thanks.. @gustavox, I wanted to get it over with rsrs... I hope he really comes back to edit the question as he wishes and free of ambiguities this time...rs
– Samir Braga