CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Nurzhan Nogerbek
Nurzhan Nogerbek

Reputation: 5236

How to add validation to taginput element?

In my Vue.js application I use taginput element of Buefy library. I want to add validation to input. Make aviable to enter only numbers, no letters. I tried next code but unfortunatly it didn't work. How to fix this problem?

<b-taginput v-model="tags" type="is-warning" @keypress='onlyNumberValidation'>
</b-taginput>

onlyNumberValidation ($event) {
    let keyCode = ($event.keyCode ? $event.keyCode : $event.which)
    if ((keyCode < 48 || keyCode > 57) && keyCode !== 46) {
        $event.preventDefault()
    }
}

Upvotes: 0

Views: 271

Answers (1)

Riddhi
Riddhi

Reputation: 2244

You can do it in simple way by checking the input by using the default feature as shown below Template

<div id="app" class="container">

    <section>
        <b-field label="Tags with 3 characters">
            <b-taginput
v-model="tags"

:before-adding="beforeAdding">
            </b-taginput>
        </b-field>
    </section>

</div>

Script

beforeAdding(tag) {
            return tag.match(/^\d+$/);
        },

Below is the codepen link as a demo https://codepen.io/anon/pen/wNooaY?editors=1010

Upvotes: 1

Related Questions