Default validation rules for custom element

Learn how to set default rules on a config level.

We can override the rules prop in props when creating a custom element to assign default validation rules:

vue

<!-- IbanElement.vue -->

<script>
import { defineElement } from '@vueform/vueform'

export default defineElement({
  name: 'IbanElement',
  props: {
    rules: {
      required: false,
      default: 'min:8|max:20'
    }
  },
  setup(props, { element }) {
    // ...
  }
})
</script>

Default validation rules for custom element ​

Default validation rules for custom element