How to do validations in fieldtypes

Following an example of how you could do input validation in plugins. Instead of using v-model on your inputs you need to listen on the input event and pass your data only to the model if it is valid.

const Fieldtype = {
  mixins: [window.Storyblok.plugin],
  template: `
    <div>
      <input
        class="uk-width-1-1"
        type="number"
        @input="validate"
        :step="1"
        ref="input"
      />
      <div v-if="invalid">
        The number must be higher than 1 and lower than 5
      </div>
    </div>
  `,
  data() {
    return {
      invalid: false
    }
  },
  methods: {
    initWith() {
      return {
        plugin: 'number-restricted',
        value: null
      }
    },
    validate(e) {
      let val = parseInt(e.target.value)
      let max = 5
      let min = 1
      if (val > max || val < min) {
        this.invalid = true
      } else {
        this.invalid = false
        this.$refs.input.value = val
        this.model.value = val
      }
    },
    pluginCreated() {
      this.$nextTick(() => {
        if (this.model.value === null) {
          this.model.value = this.options.default || '4'
          this.$refs.input.value = this.model.value
        }
      })
    }
  },
  watch: {
    model: {
      handler (model) {
        this.$emit('changed-model', model)
      },
      deep: true
    }
  }
}