top of page
Custom Validations

Custom Validations

Validate a form using regular expressions and code validations.

Intermediate.png

Intermediate

17K

Published:

January 1, 2020

Girl Enjoying her Drink

by

Anchor 1
Hire a Developer

Example Description

In this example we demonstrate creating custom validations for a form.

Example Code

Tab 1

.

Tab 2

.

Tab 3

.

This code solution can be complicated.

How We Built It

This example demonstrates how forms can be validated using regular expressions and the custom validations API.


The phone input is validated using the regex:

^\([0-9]{3}\) [0-9]{3}-[0-9]{4}$

which checks that the phone number is in the format:

(555) 555-5555


The Email and Confirm Your Email inputs are validated in code, using the onCustomValidation function to register a validation event handler. It runs when the element's validation is checked. Here we check that both the email and confirmation email match.

 

When the user clicks the Done button, before saving the data in the reservations collection, we use a dataset onBeforeSave event handler to check if all the field values are valid. If they are not, we display relevant error messages in a text element which expands at the bottom of the form.


Next Steps


  1. Open this example in the Editor to work with the template.

  2. Publish the site.

  3. Learn how to work with examples in Velo.

APIs We Used

Non-code example.

Related Articles

Hire a Developer

Velo solutions are powerful tools, but building them on your own can be challenging. Let an experienced Velo development shop build it for you, so you can keep working on your site or business.

Related Examples

Did this help?

Yes

|

No

Thanks for your feedback!

Basic Form

Basic Form

Create a basic form without writing a line of code.

Intermediate.png

Beginner

Cascading Form

Cascading Form

Change the options of a dropdown based on a previous selection.

Intermediate.png

Intermediate

Collapsing Form

Collapsing Form

Collapse and expand sections of a form.

Intermediate.png

Beginner

Anchor 2
bottom of page