Clear the field automatically if it is not completely filled

[diancabral]

Good evening.

Is there any way to automatically clear the field when the mask is not completely filled?

In the jQuery Mask Plugin of Igor Escobar (https://github.com/igorescobar/jQuery-Mask-Plugin) there is the "clearIfNotMatch" option that does just that.

I need this option to "force" the user to fill in the data correctly because the field is accepting incomplete data.

[hardrese7]

Hey there,
you can easily implement that feature by yourself.

maskedInput.vue

<template>
  <input-el
    :value="value"
    @input="$emit('input', $event)"
    @blur="clearIncompletedField()"
    @paste.prevent
    v-mask="mask"
    v-bind="$attrs"
  />
</template>

<script>
import { mask } from 'vue-the-mask';

export default {
  inheritAttrs: false,
  directives: { mask },
  props: {
    value: String,
    mask: String,
  },
  methods: {
    clearIncompletedField() {
      if (this.value.length < this.mask.length) {
        this.$emit('input', '');
      }
    },
  },
};
</script>

input-el is just my wrapper of the native html input

[hardrese7]

updated example:

<template>
  <input-el
    v-mask="mask"
    :value="value"
    v-bind="$attrs"
    @input="$emit('input', $event)"
    @blur="clearIncompletedField()"
    @paste.prevent
  />
</template>

<script>
import { mask } from 'vue-the-mask';

export default {
  directives: { mask },
  inheritAttrs: false,
  props: {
    value: {
      type: String,
      required: true,
    },
    mask: {
      type: [String, Array],
      required: true,
    },
  },
  methods: {
    clearIncompletedField() {
      if (this.mask) {
        if (Array.isArray(this.mask)) {
          const valueMatchesMask = this.mask.some(m => this.value.length === m.length);
          if (valueMatchesMask) {
            return;
          }
          this.$emit('input', '');
        } else if (this.value.length < this.mask.length) {
          this.$emit('input', '');
        }
      }
    },
  },
};
</script>

[rfranchi]

updated example:

<template>
  <input-el
    v-mask="mask"
    :value="value"
    v-bind="$attrs"
    @input="$emit('input', $event)"
    @blur="clearIncompletedField()"
    @paste.prevent
  />
</template>

<script>
import { mask } from 'vue-the-mask';

export default {
  directives: { mask },
  inheritAttrs: false,
  props: {
    value: {
      type: String,
      required: true,
    },
    mask: {
      type: [String, Array],
      required: true,
    },
  },
  methods: {
    clearIncompletedField() {
      if (this.mask) {
        if (Array.isArray(this.mask)) {
          const valueMatchesMask = this.mask.some(m => this.value.length === m.length);
          if (valueMatchesMask) {
            return;
          }
          this.$emit('input', '');
        } else if (this.value.length < this.mask.length) {
          this.$emit('input', '');
        }
      }
    },
  },
};
</script>

Thank you for the example, i had to adjust the @input="$emit('input', $event)" to @input="$emit('input', $event.target.value)" because was freezing the browser. After that worked perfectly.