Oliver Oliver - 3 months ago 11
HTML Question

html pattern="[A-Za-z]{50}" is saying valid input is invalid

I have a page with some text fields and I would like to restrict user input, so I have used the html5 pattern attribute, like so:

<input name="team_name" type="text" pattern="[A-Za-z]{50}" value="<?php echo $team_name;?>">


This should allow me to enter only letters b/w Aa-Zz for a name, but when I try to enter a valid name, it still tells me to match the requested format.
What am I missing? How come it is always telling me that my input is invalid?

Answer

The rule [A-Za-z]{50} will make the name acceptable only when it contains exact 50 alphabets.

[A-Za-z]{10,50}

This will make the name minimum 10 and maximum 50 characters. Update the expression according to your requirements.

Demo:

input:invalid {
  color: red;
}
<form>
  <input name="team_name" type="text" pattern="[A-Za-z]{10,50}" value="">
  <br />
  <input type="submit">
</form>