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
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}
/>
