Rich Automation Inputs
We have a way to create validations for each parameter and this will provide security for your template at the form level. Each parameter could receive any validations following these specifications:
The types are consist in:
text, email, url, number, tel, time, date, select.
┌─────────────────┬─────────────────┬─────────────────────┬─────────────────────────────────────┐
│ Attribute │ Types │ Default value │ Desciption │
├─────────────────┼─────────────────┼─────────────────────┼─────────────────────────────────────┤
│ description │ All │ │ String. Text that appears inside │
│ │ │ │ of the helper tooltip. │
├─────────────────┼─────────────────┼─────────────────────┼─────────────────────────────────────┤
│ placeholder │ All │ "Define a value for │ String. Text that appears in the │
| | | {{parameter_name}}" │ form control when it has no value │
│ │ │ │ set. │
├─────────────────┼─────────────────┼─────────────────────┼─────────────────────────────────────┤
│ required │ All │ true │ Boolean. A value is required or │
│ │ │ │ must be check for the form to be │
│ │ │ │ submittable. │
├─────────────────┼─────────────────┼─────────────────────┼─────────────────────────────────────┤
│ pattern │ text, url, tel, │ │ JavaScript regular expression. │
│ │ email │ │ Pattern the value must match to be │
│ │ │ │ valid. │
├─────────────────┼─────────────────┼─────────────────────┼─────────────────────────────────────┤
│ maxlength │ text, url, tel, │ │ Maximum length (number of │
│ │ email │ │ characters) of value. │
├─────────────────┼─────────────────┼─────────────────────┼─────────────────────────────────────┤
│ minlength │ text, url, tel, │ │ Minimum length (number of │
│ │ email │ │ characters) of value. │
├─────────────────┼─────────────────┼─────────────────────┼─────────────────────────────────────┤
│ max │ number, time, │ │ Number. Maximum value. │
│ │ date │ │ │
├─────────────────┼─────────────────┼─────────────────────┼─────────────────────────────────────┤
│ min │ number, time, │ │ Number. Minimum value. │
│ │ date │ │ │
├─────────────────┼─────────────────┼─────────────────────┼─────────────────────────────────────┤
│ step │ number, time, │ │ Incremental values that are valid. │
│ │ date │ │ │
├─────────────────┼─────────────────┼─────────────────────┼─────────────────────────────────────┤
│ options │ select │ │ Array of strings. Options that │
│ │ │ │ appears in the select HTML element. │
└─────────────────┴─────────────────┴─────────────────────┴─────────────────────────────────────┘
pro-tip
We are using parts of the same types and atributes from the HTML element input, you can find more informations here.
Creating the file for validation
These validations are stored in a JSON file with the same name of their template file and with the .config extension instead.
For other-template.sql
Use other-template.config.json
You can use as example this file:
{
"name": {
"type": "text",
"description": "this is a text without pattern"
},
"shorter_name": {
"type": "text",
"description": "this is a text with patterns",
"maxlength": 10,
"minlength": 2
},
"email": {
"type": "email",
"description": "this is a email with pattern"
},
"github_link": {
"type": "url",
"description": "this is a url without pattern"
},
"age": {
"type": "number",
"description": "this is a number without pattern"
},
"school_grade": {
"type": "number",
"description": "this is a number float with range",
"min": 0,
"max": 10,
"step": 0.1
},
"less_than_ten": {
"type": "number",
"description": "this is a number with range",
"min": 0,
"max": 9
},
"telephone": {
"type": "tel",
"description": "this is a tel with pattern",
"placeholder": "999-999-9990",
"pattern": "[0-9]{3}-[0-9]{3}-[0-9]{4}"
},
"lunch_time": {
"type": "time",
"description": "this is a time without pattern"
},
"birthday": {
"type": "date",
"description": "this is a date without range"
},
"best_day_last_year": {
"type": "date",
"description": "this is a date with patterns",
"min": "2021-01-01",
"max": "2021-12-31"
},
"which_your_favourite_band": {
"type": "select",
"description": "this is a select options",
"options": ["backstreet boys", "the cure", "maroon 5", "the cranberries"]
}
}