0

I have the following code:

<label for="nome">Nome*:
<input type="text" maxlength="100" name="nome" value="<?= he($nome) ?>" id="nome" />
</label>

function he($s) {
    return htmlentities($s, ENT_QUOTES, CHAR_SET);
}

How can I restrict the use of characters in this code? I want to accept only letters, spaces and accentuation.,

Thanks all.

Robert Harvey
  • 178,213
  • 47
  • 333
  • 501
user2592714
  • 1
  • http://stackoverflow.com/questions/1547669/restricting-text-box-inputs-to-a-given-regexp-using-jquery – Brian Aug 20 '13 at 18:10

1 Answers1

2

The "good" way is to use the pattern attribute, which will only allow the characters you decide to allow directly from the HTML, and simply won't allow the others to be inputted. You use a regular expression, very similar to what you do in PHP and JavaScript, for that.

<input type="text" pattern="[A-Za-zÀ-ÿ ]*" placeholder="Only letters, spaces and accentuated letters" />

Apparently, À is the first in the character table to be an accentuated character, and they all follow until the last, ÿ. But if you don't trust this you can just list your characters, such as [A-Za-zÀÈÉÊêéàèâ ]*, too.

Now, however, it's important to note that this method is not widely supported enough to be used alone.

EDIT 2017-01-16 : As seen on Caniuse.com, times have changed and people have updated their browsers. IE 8-9 usage has dropped significantly, IE 11 has been released for Windows 7, and many IE users have updated to it. Many would claim that at this point, it's okay to lighten your site by using only the pattern attribute client side, and leave old browser users to be handled by the server-side validation.

Remember though, no matter what, you still need to validate everything server-side, not only to avoid unexpected results from old browser users, but also and mostly because it would be a big security hole not to do so.

If you want to render it impossible to even type these characters on browsers that don't support the pattern attribute, you'll need to use JavaScript. It's a bit of a pain, but probably, there are pre-made functions that you can find somewhere.

If you want to do it yourself, it's along the lines of adding an onKeyUp event on your text field, and each time a character is typed, check the string with your regular expression and strip from it whatever isn't allowed.

Whatever you do client-side (HTML and JS), it's a given that your PHP needs to check its incoming values so they fit what you want.

It can be something simple like this, on your "form sent" page.

<?php
    $clientName=$_POST['clientName'];
    if(!preg_match('/[A-Za-zÀ-ÿ ]*/',$clientName)) {
        //If $clientName does NOT match [capital letters, lower-case letters,
        //accentuated characters and space] (zero or any number of times)
        echo '<div class="error">Only letters, spaces and accentuated letters are allowed.</div>';
    }
    else {
        echo '<div class="success">Form submitted successfully.</div>';
    }
?>

PS: If it's indeed for a name, it might be nice to accept hyphens too. Or Mary-Jane will be sad.

Ariane
  • 393
  • 4
  • 14