One of our most requested features has been input validation: enabling devs to define and set rules that ensure editors and content teams provide the correct data.
We’re now in the final planning phases, and we’d love your feedback before we start building.
Here’s what we’re thinking for the first iteration of the feature:
Validation rules
- Required values
- Min/max length for text inputs
- Min/max values for numbers
- Date ranges
- File size limits
- Pattern matching
- Array length limits and uniqueness
Key features
- Inline error messages on inputs
- Prevent saving files with validation errors
- Conditional validation (hidden or disabled inputs won’t be validated)
You can read about all of our input options in the input reference documentation.
Examples
Here are some validation scenarios we’re planning to support at release:
Text length validation
Limiting the length of a text input to 10 characters:
title: 'Hi!'
_inputs:
title:
type: text
options:
max_length: 10
Limiting the length of a text input to between 5 and 10 characters:
title: 'Hello!'
_inputs:
title:
type: text
options:
min_length: 5
max_length: 10
Number validation
Limiting the value of a number input to between -10 and 0:
metres_from_sea_level: -5
_inputs:
metres_from_sea_level:
type: number
options:
min: -10
max: 0
Array validation
Ensuring an array contains between 2 and 5 items, with no duplicates:
featured_posts:
- /posts/my-post.md
- /posts/my-other-post.md
_inputs:
featured_posts:
type: array
options:
min_items: 2
max_items: 5
unique_on: '$' # JSON Path selector for each root item
Ensuring an array contains no duplicates based on a nested key:
related_posts:
- post: /posts/my-post.md
featured: true
- post: /posts/my-other-post.md
featured: false
_inputs:
related_posts:
type: array
options:
unique_on: '$.post' # JSON Path selector for post inside each item
Date and time validation
Limiting a Datetime to 2022:
previous_event: 2020-05-01T00:00:00Z
_inputs:
previous_event:
type: datetime
options:
start_from: 2022-01-01T00:00:00Z # inclusive
end_before: 2023-01-01T00:00:00Z # exclusive
Ensure a date is in or after 2000:
this_millennium: 2020-05-01T00:00:00Z
_inputs:
this_millennium:
type: date
options:
start_from: 2000-01-01T00:00:00Z # inclusive
File size validation
Making sure new or existing files are under 1MB:
hero_image: /uploads/big-image.png
_inputs:
hero_image:
type: image
options:
max_file_size: 1000 # in kB
Pattern validation
Ensure that an email input contains an email address:
email_address: /uploads/big-image.png
_inputs:
email_address:
type: email
options:
pattern: '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}'
pattern_message: 'Use the format ___@___.__'
Making sure an input has a http or https protocol:
full_url: 'https://cloudcannon.com/'
_inputs:
full_url:
type: url
options:
pattern: '^https?\:\/\/'
Future considerations
Although it won’t be part of our initial release, we’re also thinking about JSON Schema validation for complex rules, with error messages for invalid input values. Unlike the other validation methods we have listed above, JSON Schema validation would not be able to prevent actions (e.g., CloudCannon will disable the add button on an array once max_items is reached).
Complex object validation
Ensure an object has the on_background input set to ‘light’:
next_color:
_type: flat_color
value: '#ff0000'
on_background: 'light'
_inputs:
next_color:
options:
structures: _structures.colors_and_gradients
json_schema:
type: object
properties:
on_background:
const: 'light'
json_schema_message: 'Use a color/gradient for use on a light background.'
Complex array validation
Ensure only one array item has its featured input enabled, and all post keys are unique:
top_posts:
- post: /posts/my-post.md
featured: true
- post: /posts/my-other-post.md
featured: false
- post: /posts/another-post.md
featured: false
_inputs:
top_posts:
type: array
options:
unique_on: '$.post'
json_schema_message: 'Only one post can be featured.'
json_schema:
type: array
contains:
type: object
properties:
featured:
const: true
minContains: 1
maxContains: 1
We’d love to hear from you
- Do these examples cover your needs? What other scenarios would be helpful?
- How do you feel about the proposed syntax? Is it intuitive and easy to understand?
- Which validation rules would be most valuable for your projects?
- Any concerns about the proposed implementation?
Note: This is a draft proposal and details may change based on community feedback and technical considerations.
