Regex to prevent accented letters in the input

Question

I want to block the entry of accented letters (any language) in input, preferably I would like this block to be done with regex through the attribute pattern

I tried something but I did not succeed...

<form>
  <label for="username">Name <i>(only letters without accent)</i></label>
  <br>
  <input name="username" id="username" type="text" pattern="[A-Za-z]+" oninvalid="this.setCustomValidity('Only letters without accent')">
</form>

Accepts: Joao Silva, Pedro, Fabio Duarte...

Rejects: João Silva, Pedro Camões, Fábio Duarte ...

Answer 1

<input name="username" id="username" type="text" 
    pattern="[A-Za-z ]*" title="Latin letters and space characters only"> />

Test this code here.

---

Alternatively, you can control what characters are allowed during typing.

<input name="username" id="username" type="text" onCopy="return false" 
    onDrag="return false" onDrop="return false" onPaste="return false" 
    autocomplete=off />

jQuery:

$(document).ready(function() {
    $("#username").keypress(function(event) {
        var inputValue = event.which;
        if(!((inputValue >= 65 && inputValue <=  90) ||  // A-Z
             (inputValue >= 97 && inputValue <= 122) ||  // a-z
             (inputValue == 32))) {                      // space
            event.preventDefault(); 
        }
    });
});

Test this code here.

Answer 2

Original Answer

As specified in the question, it sounds like you want to block anything other than basic Latin alphabet letters and spaces, which is doable with a pattern attribute - the regex is ^[a-zA-Z ]+$.

Edit 2020-08-19

The question asks specifically about "accented letters", not non-Latin-alphabet characters or non-ASCII characters. As of 2020, and assuming you don't need to support Internet Explorer, this is actually fairly simple to check for in JavaScript.

Explanation

NFD normalization splits apart all diacritics from their base characters. The regex /\p{M}/u matches anything in the Unicode "Mark" category, such as all those diacritics we just split apart.

const hasDiacritics = str =>
  /\p{M}/u.test(str.normalize('NFD'))

// tests
;[
  'Joao Silva',
  'Pedro',
  'Fabio Duarte',
  'João Silva',
  'Pedro Camões',
  'Fábio Duarte',
  'Αρσένιος',
  'Αρσενιος',
  'Александра',
  '李晓华',
].forEach(str => {
  console.log(str, hasDiacritics(str))
})

You could use a similar method to strip diacritics:

const stripDiacritics = str =>
  str.normalize('NFD').replace(/\p{M}+/gu, '')


stripDiacritics('ZA̡͊͠͝LGΌ ISͮ̂҉̯͈͕̹̘̱ TO͇̹̺ͅƝ̴ȳ̳ TH̘Ë͖́̉ ͠P̯͍̭O̚​N̐Y̡ H̸̡̪̯ͨ͊̽̅̾̎Ȩ̬̩̾͛ͪ̈́̀́͘ ̶̧̨̱̹̭̯ͧ̾ͬC̷̙̲̝͖ͭ̏ͥͮ͟Oͮ͏̮̪̝͍M̲̖͊̒ͪͩͬ̚̚͜Ȇ̴̟̟͙̞ͩ͌͝S̨̥̫͎̭ͯ̿̔̀ͅ')


// => "ZALGΟ IS TOƝy THE PO​NY HE COMES"

Caveats

As pointed out in the article @Stephen P links to in the comment below, this is probably a bad idea. It's worth thinking carefully about whether you want to risk annoying or even offending your users by forcing them to enter something that isn't their real name.