Prevent entering numeric and Special Characters for input

Question

I have written a method that captures the entered key through event.

NameValidation(e){

    if(!e.key.match(/^[a-zA-Z]*$/))
    {
        e.key = '';
        console.log(e.key);
    }
},

What this does is basically checks if a user has entered a special character or number and if so replaces the special character/number to an empty string.

The issue starts with e.key = '';.

As it does not replace the captured key. What am I missing here ?

You could use the [HTML pattern attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern) instead. — Jordan Stubblefield, Nov 02 '20 at 12:20
@JordanStubblefield thanks for the feedback Jordan, i kind of wanted to do this in Vue js. Am new to vue and I wasn't sure how to implement it initially — ThivankaW, Nov 02 '20 at 12:25
Ah, no worries! Please mention those kind of details or at least put a vuejs tag next time ;) — Jordan Stubblefield, Nov 02 '20 at 12:28
@JordanStubblefield sure thank you for the help really appreciate it. — ThivankaW, Nov 02 '20 at 12:34

score 0 · Answer 1 · answered Nov 02 '20 at 12:21

0

I realized i was using Keypress event which was delayed in processing the trigger

So instead i used keydown and then used preventDefault to manipulate default event behaviour

This article Helped me How can I prevent numeric inputs using VueJS

Here my Answer

JS

      NameValidation(e){

            if(!e.key.match(/^[a-zA-Z]*$/))
            {
                e.preventDefault();
            }
           
        },

Html

<input v-model.trim="firstname_txt" v-on:keydown="NameValidation($event)">

answered Nov 02 '20 at 12:21

ThivankaW

511
1
8
21

1

a quick info: you can replace `v-on:` with `:` this is the short form: https://vuejs.org/v2/guide/syntax.html#v-on-Shorthand – wittgenstein Nov 02 '20 at 12:46
@wittgenstein thank you for your guidance.. really appreciate it :) – ThivankaW Nov 02 '20 at 12:54

Prevent entering numeric and Special Characters for input

1 Answers1