BlogPlaygroundOne

VValidation API

ads via vuetify

Props
name
type
default
disabled
boolean

null

Removes the ability to click or target the component.

error
boolean

false

Puts the input in a manual error state.

error-messages
string | string[]

[]

Puts the input in an error state and passes through custom error messages. Will be combined with any validations that occur from the rules prop. This field will not trigger validation.

focused
boolean

false

Forces a focused state styling on the component.

label
string

undefined

Sets the text of the v-label or v-field-label component.

max-errors
string | number

1

Control the maximum number of shown errors from validation.

model-value
unknown

undefined

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

name
string

undefined

Sets the component’s name attribute.

readonly
boolean

null

Puts input in readonly state.

rules
(
  | string
  | boolean
  | PromiseLike<ValidationResult>
  | ((value: any) => string | false | true)
  | ((value: any) => PromiseLike<ValidationResult>)
  | [string, any, string]
)[]

[]

Accepts a mixed array of types function, boolean and string. Functions pass an input value as an argument and must return either true / false or a string containing an error message. The input field will enter an error state if a function returns (or any value in the array contains) false or is a string.

validate-on
  | 'eager'
  | 'lazy'
  | 'blur'
  | 'input'
  | 'submit'
  | 'invalid-input'
  | 'blur lazy'
  | 'input lazy'
  | 'submit lazy'
  | 'invalid-input lazy'
  | 'blur eager'
  | 'input eager'
  | 'submit eager'
  | 'invalid-input eager'
  | 'lazy blur'
  | 'lazy input'
  | 'lazy submit'
  | 'lazy invalid-input'
  | 'eager blur'
  | 'eager input'
  | 'eager submit'
  | 'eager invalid-input'

undefined

Change what type of event triggers validation to run.

validation-value
any

undefined

The value used when applying validation rules.

Events
name
type
update:focused
[boolean]

Event that is emitted when the component’s focus state changes.

update:modelValue
[unknown]

Event that is emitted when the component’s model changes.

Slots
{ errorMessages: ComputedRef<string[]> isDirty: ComputedRef<boolean> isDisabled: ComputedRef<boolean> isReadonly: ComputedRef<boolean> isPristine: ShallowRef<boolean, boolean> isValid: ComputedRef<boolean | null> isValidating: ShallowRef<boolean, boolean> reset: () => Promise<void> resetValidation: () => Promise<void> validate: (silent: boolean) => Promise<string[]> validationClasses: ComputedRef<{ [x: string]: boolean }> }
default

The default Vue slot.