Form Validation Validators
Validators are configurable functions used to check whether an input value matches a specific criteria.
There are several validation options that can be used in the validators field of the form field schema.
const { schema } = useForm<{ name: string; }>({
name: {
validators: [
{ name: 'required' },
{ name: 'minLength', value: 3 }
]
}
});Alpha Validator
Preview
Component.vue
<script lang="ts" setup>
import { useForm } from '@inkline/inkline/composables';
const { schema } = useForm<{
input: string;
inputSpaces: string;
inputDashes: string;
}>({
input: {
validators: [{ name: 'alpha' }]
},
inputSpaces: {
validators: [{ name: 'alpha', allowSpaces: true }]
},
inputDashes: {
validators: [{ name: 'alpha', allowDashes: true }]
}
});
</script>
<template>
<IForm v-model="schema">
<IFormGroup>
<IInput name="input" placeholder="This field should contain only letters" />
<IFormError for="input" />
</IFormGroup>
<IFormGroup>
<IInput
name="inputSpaces"
placeholder="This field should contain only letters and spaces"
/>
<IFormError for="inputSpaces" />
</IFormGroup>
<IFormGroup>
<IInput
name="inputDashes"
placeholder="This field should contain only letters and dashes"
/>
<IFormError for="inputDashes" />
</IFormGroup>
</IForm>
</template>Alphanumeric Validator
Preview
Component.vue
<script lang="ts" setup>
import { useForm } from '@inkline/inkline/composables';
const { schema } = useForm<{
input: string;
inputSpaces: string;
inputDashes: string;
}>({
input: {
validators: [{ name: 'alphanumeric' }]
},
inputSpaces: {
validators: [{ name: 'alphanumeric', allowSpaces: true }]
},
inputDashes: {
validators: [{ name: 'alphanumeric', allowDashes: true }]
}
});
</script>
<template>
<IForm v-model="schema">
<IFormGroup>
<IInput name="input" placeholder="This field should contain only letters and numbers" />
<IFormError for="input" />
</IFormGroup>
<IFormGroup>
<IInput
name="inputSpaces"
placeholder="This field should contain only letters, numbers and spaces"
/>
<IFormError for="inputSpaces" />
</IFormGroup>
<IFormGroup>
<IInput
name="inputDashes"
placeholder="This field should contain only letters, numbers and dashes"
/>
<IFormError for="inputDashes" />
</IFormGroup>
</IForm>
</template>Email Validator
Preview
Component.vue
<script lang="ts" setup>
import { useForm } from '@inkline/inkline/composables';
const { schema } = useForm<{
input: string;
}>({
input: {
validators: [{ name: 'email' }]
}
});
</script>
<template>
<IForm v-model="schema">
<IFormGroup>
<IInput name="input" placeholder="This field should contain an email" />
<IFormError for="input" />
</IFormGroup>
</IForm>
</template>Min Validator
Preview
Component.vue
<script lang="ts" setup>
import { useForm } from '@inkline/inkline/composables';
const { schema } = useForm<{
input: string;
}>({
input: {
validators: [{ name: 'min', value: 10 }]
}
});
</script>
<template>
<IForm v-model="schema">
<IFormGroup>
<IInput name="input" placeholder="This field accepts a minimum value of 10." />
<IFormError for="input" />
</IFormGroup>
</IForm>
</template>Max Validator
Preview
Component.vue
<script lang="ts" setup>
import { useForm } from '@inkline/inkline/composables';
const { schema } = useForm<{
input: string;
}>({
input: {
validators: [{ name: 'max', value: 100 }]
}
});
</script>
<template>
<IForm v-model="schema">
<IFormGroup>
<IInput name="input" placeholder="This field accepts a maximum value of 100." />
<IFormError for="input" />
</IFormGroup>
</IForm>
</template>Min Length Validator
Preview
Component.vue
<script lang="ts" setup>
import { useForm } from '@inkline/inkline/composables';
const { schema } = useForm<{
input: string;
}>({
input: {
validators: [{ name: 'minLength', value: 6 }]
}
});
</script>
<template>
<IForm v-model="schema">
<IFormGroup>
<IInput name="input" placeholder="This field requires at least 6 characters." />
<IFormError for="input" />
</IFormGroup>
</IForm>
</template>Max Length Validator
Preview
Component.vue
<script lang="ts" setup>
import { useForm } from '@inkline/inkline/composables';
const { schema } = useForm<{
input: string;
}>({
input: {
validators: [{ name: 'maxLength', value: 12 }]
}
});
</script>
<template>
<IForm v-model="schema">
<IFormGroup>
<IInput name="input" placeholder="This field accepts up to 12 characters." />
<IFormError for="input" />
</IFormGroup>
</IForm>
</template>Number Validator
Preview
Component.vue
<script lang="ts" setup>
import { useForm } from '@inkline/inkline/composables';
const { schema } = useForm<{
input: string;
inputNegative: string;
inputNegativeDecimal: string;
}>({
input: {
validators: [{ name: 'number' }]
},
inputNegative: {
validators: [{ name: 'number', allowNegative: true }]
},
inputNegativeDecimal: {
validators: [{ name: 'number', allowNegative: true, allowDecimal: true }]
}
});
</script>
<template>
<IForm v-model="schema">
<IFormGroup>
<IInput name="input" placeholder="This field should contain only numbers" />
<IFormError for="input" />
</IFormGroup>
<IFormGroup>
<IInput
name="inputNegative"
placeholder="This field should contain positive or negative numbers"
/>
<IFormError for="inputNegative" />
</IFormGroup>
<IFormGroup>
<IInput
name="inputNegativeDecimal"
placeholder="This field should contain positive or negative decimal numbers"
/>
<IFormError for="inputNegativeDecimal" />
</IFormGroup>
</IForm>
</template>Required Validator
Preview
Component.vue
<script lang="ts" setup>
import { useForm } from '@inkline/inkline/composables';
const { schema } = useForm<{
input: string;
}>({
input: {
validators: [{ name: 'required' }]
}
});
</script>
<template>
<IForm v-model="schema">
<IFormGroup>
<IInput name="input" placeholder="This field is required" />
<IFormError for="input" />
</IFormGroup>
</IForm>
</template>Same As Validator
Preview
Component.vue
<script lang="ts" setup>
import { useForm } from '@inkline/inkline/composables';
const { schema } = useForm<{
password: string;
passwordConfirmation: string;
}>({
password: {
validators: [{ name: 'required' }]
},
passwordConfirmation: {
validators: [{ name: 'sameAs', target: 'password', schema: () => schema.value }]
}
});
</script>
<template>
<IForm v-model="schema">
<IFormGroup>
<IInput type="password" name="password" placeholder="Enter your password" />
<IFormError for="password" />
</IFormGroup>
<IFormGroup>
<IInput
type="password"
name="passwordConfirmation"
placeholder="Confirm your password"
/>
<IFormError for="passwordConfirmation" />
</IFormGroup>
</IForm>
</template>Custom Validator
Preview
Component.vue
<script lang="ts" setup>
import { useForm } from '@inkline/inkline/composables';
const { schema } = useForm<{
input: string;
}>({
input: {
validators: [
{
name: 'custom',
message: 'Please enter a value containing "inkline".',
validator: (v: string) => /inkline/.test(v)
}
]
}
});
</script>
<template>
<IForm v-model="schema">
<IFormGroup>
<IInput
name="input"
placeholder="This field is custom validated. It needs to contain 'inkline'"
/>
<IFormError for="input" />
</IFormGroup>
</IForm>
</template>