How can i restrict special characters from being typed and pasted in html text boxes

Question

I have a text input box for entering user name. i want to restrict the special characters and numbers from being typed in that box(not showing the error after the submit button click. avoiding typing and pasting from keyboard and mouse). I came across some javascipt codes to restrict on the keyboard and mouse events (like keypress etc.,). but i think there might be better way than doing this by adding some html attributes or by adding some bootstrap framework classes.

I tried the below code (ruby on rails):

<%= f.text_field :fname,  required: true, placeholder: "First Name", class: "form-control",:pattern => "^[a-zA-Z0-9]+$" %>

However this is triggering the error after submit button click

I am using JQuery in my application.

Please don't post code in the comment section. Please edit your question. — Carsten Løvbo Andersen, Apr 13 '18 at 07:37
I don't know if there is a better method than using JS events. I recently answered using `keyup` event in a "similar" question. (https://stackoverflow.com/questions/49731857/how-can-i-prevent-tilde-in-input/49732153?noredirect=1#comment86478011_49732153) — Takit Isy, Apr 13 '18 at 07:40

score 0 · Answer 1 · answered Apr 13 '18 at 08:22

0

You can use input masks. There are many jquery plugins which will help you do so.

Check this stackoverflow question for demo and answers:

How to restrict special characters in a certain form field

answered Apr 13 '18 at 08:22

ashfaq.p

5,379
21
35

How can i restrict special characters from being typed and pasted in html text boxes

1 Answers1