Vue tags input custom validation

Question

I'm using vue-tags-input component. In its docs we can find validation. I'm trying to create validation so valid input must have:

min 3 signs
two numbers
comma between numbers

this is what I have:

validation: [{
    classes: 'min-length',
    rule: tag => tag.text.length < 3,
},{
    classes: 'min-length',
    rule: ({ text }) => {
        const comma = text.indexOf(',') === -1;
        if(comma) {
            const arr = text.split(',')
            if(arr[0] && arr[1]) {
                if(arr[0].typeof === 'number' && arr[1].typeof === 'number') {
                    return true;
                }
            }
        }
        return false;
    }
}]

So I'm spliting string to array by ,. In result I should have array with two elements. Then I check if both elemenets are numbers. How ever this not work properly because it treat 111 as valid but it shoudn't.

I've created demo on codesanbox.

Are the numbers always integers? Are they always positive?

skirtle
– skirtle

2019-07-20 17:41:08 +00:00
Commented Jul 20, 2019 at 17:41 — skirtle
– skirtle, Commented Jul 20, 2019 at 17:41
If rule returns true does that mean it passes or fails?

user2638618
– user2638618

2019-07-21 14:06:38 +00:00
Commented Jul 21, 2019 at 14:06 — user2638618
– user2638618, Commented Jul 21, 2019 at 14:06

Munim Munna · Accepted Answer · 2019-07-20 16:06:25Z

1

+50

To check if comma exists you have to check if indexOf comma not equals -1.
```
const comma = text.indexOf(",") !== -1;
```
You have to convert the string to number using Number(string).
```
if (typeof Number(arr[0]) === "number") {..
```
You have to return false if validation succeeds and true if there is an error, you are doing the opposite.

The complete code will be:

{
  classes: "custom",
  rule: ({ text }) => {
    const comma = text.indexOf(",") !== -1;
    if (comma) {
      const arr = text.split(",");
      if (arr[0] && arr[1]) {
        if (typeof Number(arr[0]) === "number" && typeof Number(arr[1]) === "number") {
          return false;
        }
      }
    }
    return true;
  }
}

A shorter regex rule will be:

{
  classes: "custom",
  rule: ({ text }) => {
    return !text.match(/^\d+,\d+$/);
  }
}

answered Jul 20, 2019 at 16:06

Munim Munna

17.6k6 gold badges31 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue tags input custom validation

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related