How to stop input event if my validation failed?

Question

I have simple input and I only need integers, but if I use e.preventDefault() and return to stop input event, input event will be still work.

input
    v-on:input="changeFraction"
    name="denominator"
    type="text"
    v-bind:value="fraction.denominator"

data() {
    return {
      fraction: {
        numerator: '',
        denominator: '',
      },
    };
  },
methods: {
    changeFraction(e) {
      const el = e.target;


      if (!/[0-9]/g.test(el.value)) {
          e.preventDefault();
          return null;
      }
        this.fraction[el.name] = el.value;

    },
  },

@dfsq type='number' allows you to enter numbers and numbers with a remainder. But i need only whole numbers — Drop
– Drop, Commented Mar 4, 2019 at 7:51

piemekanika · Accepted Answer · 2019-03-04 07:32:41Z

1

Just use computed for validation and null for @input event when input is not valid.

For instance:

<input type="text" v-model="fraction.numerator" @input="numeratorValid ? changeFraction : null"/>

computed: {
  numeratorValid () {
    return Number.isInteger(this.fraction.numerator)
  }
}

answered Mar 4, 2019 at 7:32

piemekanika

4452 gold badges7 silver badges14 bronze badges

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

2 Comments

Drop Over a year ago

How be if i have second input with another data?

piemekanika Over a year ago

Make second computed method for validating another input.

Drop · Accepted Answer · 2019-03-04 13:45:06Z

<template>
  <div class = "fraction">

    <input
      @change = "changeFraction"
      name = "numerator"
      type = "number"
      v-model.number = "fraction.numerator" 
      />

    <input
      @change = "changeFraction"
      name = "denominator"
      type = "number"
      v-model.number = "fraction.denominator" 
    />

  </div>
</template>

<script>
  export default {
    name: 'FractionItem',
    data() {
      return {
        fraction: {
          numerator: '',
          denominator: '',
        },
      };
    },
    methods: {
      changeFraction(e) {
        const el = e.target;
        //need add plus before value, because writting letter in input change data value to string type
        if (!/[0-9]/g.test(+this.fraction[el.name])) {
          e.preventDefault();
        }

        this.$parent.changeFractionInput({
          id: this.id,
          [el.name]: +this.fraction[el.name],
          key: el.name,
        });
      },
    },
  }; 
</script>


<style lang = "scss" scoped></style>

Collectives™ on Stack Overflow

How to stop input event if my validation failed?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related