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.
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.
<divclass="app"><v-formv-slot="form"method="GET"><!-- Global form error --><divclass="text-danger mb-5"v-if="form.invalid">
Something went wrong. Please correct the fields below.
</div><!-- Text field validation --><v-inputclass="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><!-- Number field validation --><v-inputclass="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><!-- Select field validation --><v-selectclass="mb-5"name="select"placeholder="Choose from list"description="Choose something from the list (required)"error="Choose something from the list (required)"required><v-optionvalue="0">Option 1</v-option><v-optionvalue="1">Option 2</v-option><v-optionvalue="2">Option 3</v-option><v-optionvalue="3">Option 4</v-option><v-optionvalue="4">Option 5</v-option></v-select><!-- Regex field validation --><v-inputclass="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-buttontag="button">Save button</v-button></v-form></div>
<divclass="app"><v-formv-slot="form"method="POST"action="https://www.mocky.io/v2/5d81366f300000690069959a?mocky-delay=500ms"async><v-inputname="name"class="mb-5"placeholder="Name"></v-input><divclass="d-flex align-items-center mb-5"><v-buttonclass="mr-3"tag="button">Save button</v-button><!-- Status messages (change to toasts) --><v-textv-if="form.submitting">Saving...</v-text><v-textv-else-if="form.response && form.response.ok">Changes have been saved.</v-text><v-textv-else-if="form.response && !form.response.ok">Something went wrong.</v-text></div><!-- JSON view --><preclass="m-0"style="color: #fff;">{{JSON.stringify(form, null, 2)}}</pre></v-form></div>
<divclass="app"><v-form><v-inputclass="mb-5"placeholder="Field with description"description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."></v-input><v-inputplaceholder="Field with error"value="Consectetur adipiscing"error="Lorem ipsum dolor sit amet"invalid></v-input></v-form></div>
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.
<divclass="app"><v-form><v-inputplaceholder="Field name"value="Lorem ipsum"><spanclass="field-validation-error error">
This is an error from ASP.NET
</span></v-input></v-form></div>