HTML5 Validate Input to accept alphabets only

Question

I have an input firstname

<input pattern="[a-zA-Z]" oninvalid="setCustomValidity('Please enter on alphabets only. ')" type="text" class="form-control" name="first_name" placeholder="Firstname">

I enter it as : qwerqwe

I kept getting

Please enter on alphabets only. print out

Isn't qwerqwe suppose to be valid ? I'm a little confuse now, and not sure what I missed here.

Can someone please provide me some hints on this ?

Answer 1

You are allowing only ONE character. You missed the + sign:

<input pattern="[a-zA-Z]+" oninvalid="setCustomValidity('Please enter on alphabets only. ')" type="text" class="form-control" name="first_name" placeholder="Firstname">

As @le_m said in comments, you can write * wildcard to allow empty input:

<input pattern="[a-zA-Z]*" oninvalid="setCustomValidity('Please enter on alphabets only. ')" type="text" class="form-control" name="first_name" placeholder="Firstname">

Answer 2

use title attribute for validation name.

pattern="[A-Za-z0-9].{1,}" title="Please Enter Valid Company Name"