Components Component name: <v-form>
The v-form
component makes it easy to add validation and make client side form requests.
< div class = " app" >
< v-form v-slot = " form" >
</ v-form>
</ div>
1 2 3 4 5
Name Type Description Default async Boolean Wether or not to submit the form on the client (asynchronously) or traditionally using page post (synchronously). false with-credentials Boolean By default, cookies will not be sent or received, resulting in unauthenticated requests if the site relies on maintaining a user session. This setting allows both CORS and same origin requests to work with cookies. false complete Event An event that will be triggered when a request has been made. The response
object will be passed as argument. -
Scoped Slot For interacting with the form, we're exposing an object using Scoped slots .
This object contains the following:
Name Type Description invalid Boolean Indicates wether or not the form inputs are invalid. submitting Boolean Indicates wether or not the form is submitting. submit Function The submit() method submits the form (same as clicking the Submit button). response Object Response object response.ok Boolean Returns true
if the request received a status in the OK range (200-299). response.status Number Contains the status code of the response, e.g. 404
for a not found resource, 200
for a success. response.data String/Object Will return the response content as plain text or JSON.
Component name: <v-input>
< div class = " app" >
< v-form>
< v-input class = " mb-5" placeholder = " Name" > </ v-input>
< v-input class = " mb-5" placeholder = " E-mail" > </ v-input>
< v-input class = " mb-5" placeholder = " Disabled" disabled > </ v-input>
</ v-form>
</ div>
1 2 3 4 5 6 7
Name Type Description Default placeholder String Label that describes the form element - description String Helper text - error String Error message - invalid Boolean Wether or not the field is invalid. Shows error
message if invalid. false
Notice
All other properties that are not defined above, will be passed to the component as html attributes.
Textarea Component name: <v-textarea>
< div class = " app" >
< v-form>
< v-textarea class = " mb-5" placeholder = " Textarea" > </ v-textarea>
</ v-form>
</ div>
1 2 3 4 5
Textarea API Name Type Description Default placeholder String Label that describes the form element - description String Helper text - error String Error message - invalid Boolean Wether or not the field is invalid. Shows error
message if invalid. false
Notice
All other properties that are not defined above, will be passed to the component as html attributes.
Select Component name: <v-select>
Select Option 1 Option 2 Option 3 Option 4 Option 5
< div class = " app" >
< v-form>
< v-select class = " mb-5" placeholder = " Select" >
< v-option value = " 0" > Option 1</ v-option>
< v-option value = " 1" > Option 2</ v-option>
< v-option value = " 2" > Option 3</ v-option>
< v-option value = " 3" > Option 4</ v-option>
< v-option value = " 4" > Option 5</ v-option>
</ v-select>
</ v-form>
</ div>
1 2 3 4 5 6 7 8 9 10 11
Select API Name Type Description Default placeholder String Label that describes the form element - description String Helper text - error String Error message - invalid Boolean Wether or not the field is invalid. Shows error
message if invalid. false
Notice
All other properties that are not defined above, will be passed to the component as html attributes.
Checkbox Component name: <v-checkbox>
< div class = " app" >
< v-form>
< v-select class = " mb-5" placeholder = " Select" >
< v-option value = " 0" > Option 1</ v-option>
< v-option value = " 1" > Option 2</ v-option>
< v-option value = " 2" > Option 3</ v-option>
< v-option value = " 3" > Option 4</ v-option>
< v-option value = " 4" > Option 5</ v-option>
</ v-select>
</ v-form>
</ div>
1 2 3 4 5 6 7 8 9 10 11
Checkbox API Name Type Description Default placeholder String Label that describes the form element -
Notice
All other properties that are not defined above, will be passed to the component as html attributes.
Radio Component name: <v-radio>
< div class = " app" >
< v-form>
< v-radio name = " radio" class = " mb-3" placeholder = " Radio" checked > </ v-radio>
< v-radio name = " radio" class = " mb-3" placeholder = " Radio" > </ v-radio>
< v-radio name = " radio" placeholder = " Radio (disabled)" disabled > </ v-radio>
</ v-form>
</ div>
1 2 3 4 5 6 7
Radio API Name Type Description Default placeholder String Label that describes the form element -
Notice
All other properties that are not defined above, will be passed to the component as html attributes.
Toggle Component name: <v-toggle>
< div class = " app" >
< v-form>
< v-toggle class = " mb-3" placeholder = " Toggle" checked > </ v-toggle>
< v-toggle class = " mb-3" placeholder = " Toggle" > </ v-toggle>
< v-toggle placeholder = " Toggle (disabled)" checked disabled > </ v-toggle>
</ v-form>
</ div>
1 2 3 4 5 6 7
Toggle API Name Type Description Default placeholder String Label that describes the form element -
Notice
All other properties that are not defined above, will be passed to the component as html attributes.
Examples
Select Option 1 Option 2 Option 3 Option 4 Option 5
Select (disabled) Option 1 Option 2 Option 3 Option 4 Option 5
Save button Cancel
< div class = " app" >
< v-form method = " POST" >
< v-input class = " mb-5" placeholder = " Name" > </ v-input>
< v-input class = " mb-5" placeholder = " E-mail" > </ v-input>
< v-input class = " mb-5" placeholder = " Disabled" disabled > </ v-input>
< v-textarea class = " mb-5" placeholder = " Textarea" > </ v-textarea>
< v-select class = " mb-5" placeholder = " Select" >
< v-option value = " 0" > Option 1</ v-option>
< v-option value = " 1" > Option 2</ v-option>
< v-option value = " 2" > Option 3</ v-option>
< v-option value = " 3" > Option 4</ v-option>
< v-option value = " 4" > Option 5</ v-option>
</ v-select>
< div class = " mb-5" >
< v-checkbox class = " mb-3" placeholder = " Checkbox" checked > </ v-checkbox>
< v-checkbox class = " mb-3" placeholder = " Checkbox" > </ v-checkbox>
< v-checkbox placeholder = " Checkbox (disabled)" checked disabled > </ v-checkbox>
</ div>
< div class = " mb-5" >
< v-radio name = " radio" class = " mb-3" placeholder = " Radio" checked > </ v-radio>
< v-radio name = " radio" class = " mb-3" placeholder = " Radio" > </ v-radio>
< v-radio name = " radio" placeholder = " Radio (disabled)" disabled > </ v-radio>
</ div>
< div class = " mb-5" >
< v-toggle class = " mb-3" placeholder = " Toggle" checked > </ v-toggle>
< v-toggle class = " mb-3" placeholder = " Toggle" > </ v-toggle>
< v-toggle placeholder = " Toggle (disabled)" checked disabled > </ v-toggle>
</ div>
< div class = " mb-5" >
< v-button class = " mr-3" tag = " button" > Save button</ v-button>
< v-button tag = " button" inverted > Cancel</ v-button>
</ div>
</ v-form>
</ div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
Validation (HTML5 validation) Form validation helps us to ensure that users fill out forms in the correct format, making sure that submitted data will work successfully with our applications. For more information, see the Constraint validation guide .
Choose from list Option 1 Option 2 Option 3 Option 4 Option 5
Choose something from the list (required)
Save button < div class = " app" >
< v-form v-slot = " form" method = " GET" >
< div class = " text-danger mb-5" v-if = " form.invalid" >
Something went wrong. Please correct the fields below.
</ div>
< v-input
class = " mb-5"
type = " text"
name = " name"
placeholder = " Name"
description = " Enter a name (minimum 2 characters)"
error = " Enter a valid name (minimum 2 characters)"
minlength = " 2"
required
> </ v-input>
< v-input
class = " mb-5"
type = " number"
name = " age"
placeholder = " Age"
description = " Enter your age (minimum 12)"
error = " Enter a valid age (minimum 12)"
min = " 12"
required
> </ v-input>
< v-select
class = " mb-5"
name = " select"
placeholder = " Choose from list"
description = " Choose something from the list (required)"
error = " Choose something from the list (required)"
required
>
< v-option value = " 0" > Option 1</ v-option>
< v-option value = " 1" > Option 2</ v-option>
< v-option value = " 2" > Option 3</ v-option>
< v-option value = " 3" > Option 4</ v-option>
< v-option value = " 4" > Option 5</ v-option>
</ v-select>
< v-input
class = " mb-5"
type = " text"
name = " cpr"
placeholder = " CPR number"
description = " Enter your CPR number (XXXXXX-XXXX)"
error = " Enter a valid CPR number (XXXXXX-XXXX)"
pattern = " ^[0-9]{6}-[0-9]{4}$"
required
> </ v-input>
< v-button tag = " button" > Save button</ v-button>
</ v-form>
</ div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57
Client side POST request
Save button
{
"submitting": false,
"response": null,
"invalid": false
} < div class = " app" >
< v-form v-slot = " form" method = " POST" action = " https://www.mocky.io/v2/5d81366f300000690069959a?mocky-delay=500ms" async >
< v-input name = " name" class = " mb-5" placeholder = " Name" > </ v-input>
< div class = " d-flex align-items-center mb-5" >
< v-button class = " mr-3" tag = " button" :loading = " form.submitting" > Save button</ v-button>
< v-toast v-if = " form.response && form.response.ok" success >
Changes have been saved.
</ v-toast>
< v-toast v-else-if = " form.response && !form.response.ok" error >
Something went wrong.
</ v-toast>
</ div>
< pre class = " m-0" style =" color : #fff; " > {{JSON.stringify(form, null, 2)}}</ pre>
</ v-form>
</ div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
Trigger request from event
{
"submitting": false,
"response": null,
"invalid": false
} < div class = " app" >
< v-form v-slot = " form" method = " POST" action = " https://www.mocky.io/v2/5d81366f300000690069959a?mocky-delay=500ms" async >
< v-toggle class = " mb-5" name = " toggle" value = " true" placeholder = " Toggle me" @input = " form.submit()" > </ v-toggle>
< pre class = " m-0" style =" color : #fff; " > {{JSON.stringify(form, null, 2)}}</ pre>
</ v-form>
</ div>
1 2 3 4 5 6 7
Errors and helper texts
< div class = " app" >
< v-form>
< v-input class = " mb-5" placeholder = " Field with description" description = " Lorem ipsum dolor sit amet, consectetur adipiscing elit." > </ v-input>
< v-input placeholder = " Field with error" value = " Consectetur adipiscing" error = " Lorem ipsum dolor sit amet" invalid > </ v-input>
</ v-form>
</ div>
1 2 3 4 5 6
Handle ASP.NET errors ASP.NET uses its own CSS classes, such as input-validation-error
and field-validation-error
which contains explanatory text for the error. If you provide child content to v-input
it will be considered an error description.
< div class = " app" >
< v-form>
< v-input placeholder = " Field name" value = " Lorem ipsum" >
< span class = " field-validation-error error" >
This is an error from ASP.NET
</ span>
</ v-input>
</ v-form>
</ div>
1 2 3 4 5 6 7 8 9
State management
{
"name": "John Doe",
"permission": true,
"gender": "male"
} < div class = " app" >
< v-data v-slot = " state" :data = " { name: 'John Doe', permission: true, gender: 'male' }" >
< v-form>
< v-input class = " mb-5" placeholder = " Enter name" :value = " state.name" @input = " state.name = $event.target.value" > </ v-input>
< v-checkbox class = " mb-5" placeholder = " Permission" :checked = " state.permission === true" @input = " state.permission = $event.target.checked" > </ v-checkbox>
< div class = " mb-5" >
< v-radio class = " mb-3" placeholder = " Male" :checked = " state.gender === 'male'" @input = " state.gender = 'male'" > </ v-radio>
< v-radio placeholder = " Female" :checked = " state.gender === 'female'" @input = " state.gender = 'female'" > </ v-radio>
</ div>
< pre style =" color : #fff; " > {{JSON.stringify(state, null, 2)}}</ pre>
< v-card class = " mt-5" >
< div v-if = " state.gender === 'male'" > You have chosen 'Male' 👨</ div>
< div v-if = " state.gender === 'female'" > You have chosen 'Female' 👩</ div>
</ v-card>
</ v-form>
</ v-data>
</ div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
< div class = " app" >
< v-data v-slot = " state" :data = " { permission: false }" >
< v-form>
< v-checkbox class = " mb-5" placeholder = " I promise to address Kasper Neist as 'sir'" :checked = " state.permission === true" @input = " state.permission = $event.target.checked" > </ v-checkbox>
< v-button tag = " button" :disabled = " state.permission === false" > Make promise</ v-button>
</ v-form>
</ v-data>
</ div>
1 2 3 4 5 6 7 8