Home > Software design >  How to fix pattern="[A-Za-z]" input field
How to fix pattern="[A-Za-z]" input field

Time:11-03

Hey for some reason when i use this(pattern="[A-Za-z]") in my input field nothing will be accepted?

When I enter "Ruben" in this field it just says "make sure the format complies with the requested format"? Thank you for your help

CodePudding user response:

The reason is that [A-Za-z] matches single character, Ruben is 5 hars long.

You should use [A-Za-z] for pattern instead, which will accept one or more of letters.

You could also use anchors ^[A-Za-z] $ to make sure input consists of only letters.

<form>
  <div>
    <label for="uname">enter test string </label>
    <input type="text" id="uname" name="name" required size="45"
           pattern="^[a-zA-Z] $" title="enter test string">
    <span class="validity"></span>
    <p>Input must be at least one letter and ocnsist of only letters.</p>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response:

The pattern matches exactly one character. Add a quantifier after the character class to make it match one or more of those characters.

  • Related