pattern="[a-zA-Z ]*"

im trying to limit the input to be only letters no numbers or symbols should be allowed

but the given code is not working

  <input
                name="cardName"
                type="text"
                required 
                pattern="[a-zA-Z ]*"
                defaultValue={kardName}
/>

i have also tried to use onChange method but it wasn't working too

anyhelp would be highly apperciated

CodePudding user response：

The pattern attribute specifies a regular expression that the element's value is checked against on form submission.

You can see from the snippet below, that if you hit submit, the pattern is checked and it's actually working.

<form>
    <input
      name="cardName"
      type="text"
      required 
      pattern="[a-zA-Z ]*"
    />
    <input type="submit" />
    </form>

If you want to prevent the user from inserting some character, the pattern attribute won't help you.

What You can do is check the character inside the onKeyDown function, and prevent the insertion there. Something like this:

const onKeyDown = (event) => {
if (!event.key.match(/[A-Za-z ]/)) {
  event.preventDefault()
}

...

  <input
    name="cardName"
    type="text"
    required
    onKeyDown={onKeyDown}
  />