How to block special characters in the field

Asked

Viewed 26,056 times

11

How not to allow the user to enter special characters such as *-/+.,:;[]{}ªº^~?<> in the field of question?

3 answers

14

I did it this way, it will allow only letters and numbers:

       document.getElementById("teste").onkeypress = function(e) {
         var chr = String.fromCharCode(e.which);
         if ("1234567890qwertyuioplkjhgfdsazxcvbnmQWERTYUIOPLKJHGFDSAZXCVBNM".indexOf(chr) < 0)
           return false;
       };
<input type="text" name="name" id="teste" />

13


If you want to do a simple validation only to assist the user in client-side, you can use the pattern.

It is a very easy-to-move HTML5 attribute, here have some examples that solve your problem for example by enabling only letters, letters and numbers, etc.

Example for letters and numbers:

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

And the best is that it is supported by several browser according to the Can I use.


Now the validation of the data, I recommend you do on server-side. For example with PHP you can use preg_match:

$pattern = '[a-zA-Z0-9]';
if (preg_match($pattern, $email)){return true;}

You can pass directly:

if (preg_match("/([a-zA-Z0-9])/", $email)){return true;}

This will only accept letter and number characters.

  • 1

    code the answer. Avoid relying on external link

  • Complemented by the answer Daniel...

  • If you can, complete it with more reliable support for older browsers... IE7, for example, does not. It is not recommended to rely on HTML5 features if you want to reach a general audience.

  • 1

    +1 for the recommendation to validate on the server side. Although the other answers are correct in the literal sense, validating only on the client without revalidar on the server is useless from a security point of view.

3

Use Patterns for HTML 5.

Example:

<input type="text" pattern="^[a-zA-Z0-9]+$" />
  • if the customer does not have Html5, as it does?

  • With Javascript, as Gabriel Rodrigues showed, or some lib JS.

  • put in your answer..

  • if it is solve in js, it makes nonsense the patern feature Html5.. yet it is not safe to trust and such resources, unfortunately

  • 2

    In the kennel.com the person can see which browsers support the Pattern attribute and decide whether or not to use it. This decision is up to the developer and depends on the project. @Danielomine

  • this is obvious.. lacked at least, reservations in the answers regarding the use

  • 1

    Exactly, each one chooses the best option, if to analyze talk about the best approach we would talk about doing the server-side validation depending on the server-side architecture with client-side. The question was simple, and I believe that simple solutions are always the best choice.

  • I understand, but it doesn’t convince

  • @Danielomine, when there is more than one user in the comments, it is necessary to use the @nome, otherwise you are talking to yourself or you give the impression that you do not want to dialogue...

  • I understand, I just found it unnecessary because the post was soon followed by that of the guiandmag.. by logic it is possible to understand that it was a response to him, but he does not even answer.. He does not want to dialogue. So to avoid bothering, I thought it best to respect his willingness not to answer..

  • But finally, I tried to dialogue here in the comments to decide whether or not to deny his answer.. That was the intention. I disagree with the answer as he posted. I put what I think and his justifications did not convince me. They do not answer anything. Which is why I’ve decided to deny it, unfortunately.

  • @Danielomine, very strange, because I talked about being as simple as possible in the answer and that’s why I answered with the simplest solution. But I do not know if you can interpret, because I believe that there would have ended the discussion. About your negative, it is an option of the platform, because at no time did I provide my answer to you.

Show 7 more comments

Browser other questions tagged

You are not signed in. Login or sign up in order to post.