3F Design v1.136.3

# Form

# Components

# Form

Component name: <v-form>

The v-form component makes it easy to add validation and make client side form requests.

# Form API

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. -
success Event An event that will be triggered when the request received a status in the OK range (200-299). The response object will be passed as argument. -
fail Event An event that will be triggered when the request received a status outside the OK range (200-299). The response object will be passed as argument. -
error Event An event that will be triggered when the request fails. The error object will be passed as argument. -

# Scoped Slot

For interacting with the form, we're exposing an object using Scoped slots (opens new window).

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).
reset Function The reset() method resets the values of all elements in the form
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.

# Input

Component name: <v-input>

# Input API

Name Type Description Default
placeholder String Label that describes the form element -
description String Helper text -
error String Error message -
tooltip String Tooltip text (HTML allowed). -
invalid Boolean Wether or not the field is invalid. Shows error message if invalid. false
strict Boolean Enforce strict types. Only allows [0-9] for type="number". false
cpr Boolean Adds validation according to cpr standards false

General notice

All other properties that are not defined above, will be passed to the component as html attributes.

# File

Component name: <v-file>

Remember

You must specify a NAME on any <v-file> component.

You must set method="POST" on any <v-form> that has a <v-file> component.

# File 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
droppable Boolean Wether or not the field acts as a droppable target. true
droppable-fullscreen Boolean Wether or not the entire viewport acts as a droppable target. false
max-size Number Limit the total size of files selected. Max size must be specified in MB. -
accept String Comma-separated list of accepted file extensions. -

General notice

All other properties that are not defined above, will be passed to the component as html attributes.

# Textarea

Component name: <v-textarea>

# Basic

# Auto size

# Character count with min and max

#### 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
auto-size Boolean Wether or not to dynamically adjust the height to content false
min-height Number Minimum textarea height. Requires auto-size. -
max-height Number Maximum textarea height. Requires auto-size. -

General notice

All other properties that are not defined above, will be passed to the component as html attributes.

# Select

Component name: <v-select>

# 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
small Boolean Wether or not the field is smaller. false

General notice

All other properties that are not defined above, will be passed to the component as html attributes.

# Checkbox

Component name: <v-checkbox>

Also see <v-checkbox-channels> (Mine Notifikationer)

# Checkbox API

Name Type Description Default
placeholder String Label that describes the form element -

General notice

All other properties that are not defined above, will be passed to the component as html attributes.

# Radio

Component name: <v-radio-group> + <v-radio>

# Radio API

Name Type Description Default
placeholder String Label that describes the form element -

General notice

All other properties that are not defined above, will be passed to the component as html attributes.

# Toggle

Toggle with toggle-group

Component names: <v-toggle> <v-toggle-group>

The v-toggle-group component is used to group multiple v-toggle components together. It can be used to create a toggle group that will asure when one toggle is in loading state, the others in that group are disabled.

The v-toggle-group also has a loading-timeout prop that can be used to simulate a loading state for a specific amount of time.

Toggle composition available here

# Toggle API

Name Type Description Default
placeholder String Label that describes the form element -
:loading-timeout Number Optional prop for <v-toggle-group>
(Mostly used for testing purpose, as the toggle state will change on timeout)		 0
loading1 loading2 loading3 etc. Boolean Optional prop for <v-toggle>
controlling the loading state		 false

General notice

All other properties that are not defined above, will be passed to the component as html attributes.

# Searchable select

Component name: <v-searchable-select>

Please find detailed documentation here: Searchable select.

# Searchable select address

Component name: <v-searchable-select-address>

Please find detailed documentation here: Searchable select address.

# Datepicker

Component name: <v-date-picker>

# Datepicker API

Name Type Description Default
date Date Selected date -
min Date Minimum date allowed -
max Date Maximum date allowed -
future Boolean Allow only future dates to be selected. Can be used in combination with max false
past Boolean Allow only past dates to be selected. Can be used in combination with min false
placeholder String Label that describes the form element -
date-time Boolean Enable a time picker below the calendar false

# Supported languages

Language ISO 639-1
Danish da
English en
German de
Polish pl
Russian ru
Romanian ro

# Specifying language

<script>
window.CLIENT = {
  locale: 'ru' // ISO 639-1 language code
}
</script>
1
2
3
4
5

# Date input

# Examples

# Basic form

# 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 (opens new window).

# Client side POST request

# Async file upload

# Trigger request from event

# Errors and helper texts

# 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 content to the error slot supported by most form elements it will be considered an error description.

# State management

# Radiobuttons med v-infoicon og :checked

Tip: Anvend :checked="true" i stedet for ":checked="1" for at undgå Vue.js fejlmeddelelser i konsollen.

# Dynamically disabling/enabling submit button

← Hero →