Skip to main content

Field-Level Validation

Field-level validation applies rules to individual components to ensure that the data entered meets specific requirements. These validations are checked when the user attempts to submit the form.

Common Field-Level Validations​

  • Required Fields: Mark fields that must be completed
  • Format Validation: Ensure data matches expected formats (email, phone, etc.)
  • Length Validation: Set minimum and maximum character counts
  • Range Validation: Set minimum and maximum numeric values
  • Pattern Validation: Use regular expressions for custom validation

Required Fields​

The most basic form of validation is marking a field as required. Required fields must contain a value before the form can be submitted. To make a field required:

  1. Select the component on the canvas
  2. Navigate to the Validation tab in the settings panel
  3. Enable the "Required" option
  4. Optionally, customize the error message that will be displayed if the field is left empty

Format Validation​

Certain component types have built-in format validation:

  • Email: Validates that the input is a properly formatted email address
  • Phone Number: Validates that the input matches a phone number pattern
  • URL: Validates that the input is a properly formatted web address
  • Number: Validates that the input is a numeric value

These validations are automatically applied based on the component type.

Length Validation​

For text-based components, you can set minimum and maximum length requirements:

  1. Select the component on the canvas
  2. Navigate to the Validation tab in the settings panel
  3. Set the "Minimum Length" and/or "Maximum Length" values
  4. Optionally, customize the error messages

Length validation ensures that text entries are neither too short nor too long.

Range Validation​

For numeric components, you can set minimum and maximum value requirements:

  1. Select the component on the canvas
  2. Navigate to the Validation tab in the settings panel
  3. Set the "Minimum Value" and/or "Maximum Value"
  4. Optionally, customize the error messages

Range validation ensures that numeric entries fall within an acceptable range.

Pattern Validation​

For advanced validation needs, you can use regular expressions to define custom patterns:

  1. Select the component on the canvas
  2. Navigate to the Validation tab in the settings panel
  3. Enable the "Regular Expression Pattern" option
  4. Enter a regular expression pattern
  5. Customize the error message

Pattern validation is powerful for validating complex formats such as:

  • Postal codes
  • Product codes
  • Custom ID formats
  • Specific text patterns

Custom Error Messages​

For each validation rule, you can customize the error message that is displayed when validation fails. Clear, helpful error messages can guide users to correct their input and improve the form completion experience.