# Form Validation extension
# Overview
You can make use of our in-built validation, which is lightweight and has no 3rd party depencies. We'll also show an example of rolling your own validation using the popular vee-validate (opens new window). Further, specific validation examples are shown in the documentation for each form input component.
# Basic Usage
You entered:
<us-form @submit="onSubmit()" :validate="true" v-slot="{isValid, isDirty}">
<us-form-group label="A basic text field">
<us-form-input
name="text-input2"
v-model="currentValue"
:rules="{required:true}"
/>
</us-form-group>
<us-button type="submit" variant="primary">Submit</us-button>
<us-tag variant="danger" v-if="isValid === false">Invalid</us-tag>
<us-tag variant="success" v-else-if="isValid === true">Valid</us-tag>
<us-tag variant="dark" v-if="isDirty === true">Dirty</us-tag>
<us-tag variant="light" v-else-if="isDirty === false">Prestine</us-tag>
</us-form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
You entered:
<us-form @submit="onSubmit()" :validate="true" v-slot="{isValid, isDirty}">
<us-form-group label="A basic text field">
<us-form-boolean
name="text-input2"
v-model="currentValue2"
:rules="{required:true}"
/>
</us-form-group>
<us-button type="submit" variant="primary">Submit</us-button>
<us-tag variant="danger" v-if="isValid === false">Invalid</us-tag>
<us-tag variant="success" v-else-if="isValid === true">Valid</us-tag>
<us-tag variant="dark" v-if="isDirty === true">Dirty</us-tag>
<us-tag variant="light" v-else-if="isDirty === false">Prestine</us-tag>
</us-form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
Docs coming soon.....
← Form Group Checkbox →