Resolve "Add form validation"
What is in this MR
This MR introduces form validation in the application builder form element. Currently, if you add form elements (e.g. input text, dropdown & checkbox) to your form container, preview your page, and submit your form, no validation will occur.
Validation in the form container takes place like so:
- When a user inputs a value into a form element, we add the value to the form data store with
setFormData
. - We now introduce, in the same payload, an
isValid
boolean which dictates whether the form data value is valid or not. This means that the form data store can contain a mix of valid, and invalid form values. - When the user wants to submit their form container,
FormContainerElement
will iterate over its descendants (we don't use children, as in the future it'll be possible to add another container, such as a column container, to the form container) for form elements. If one or more of these form element descendants are invalid, we prevent the form container submission button from being active (formElementChildrenAreInvalid
). - If
FormContainerElement
finds that all of its form element descendants are valid, we'll do what we currently do and fire the submission event.
In the backend, we also want to ensure that dispatched form data is valid.
- When
BuilderDispatchContext.__getitem__
is executed, we callget_data_chunk
on the data provider which relates to thekey
. - In the case of
FormDataProviderType
's implementation ofget_data_chunk
, thefirst_part
will be the element ID, and the return value is the value to use as form data. - This is our opportunity to validate the
chunk
form value against the element's type. We fetch the element instance, then from that can determine its type, and callis_valid
on it with the form value. If the value is invalid, we raiseFormDataProviderChunkInvalidException
, which in turn will raise a 400 of error "ERROR_WORKFLOW_ACTION_FORM_DATA_INVALID" inDispatchBuilderWorkflowActionView
.
How to test this MR
Feel free to test this however you wish, trying various form permutation is a good idea, but here's a good starting off point:
- Create a page.
- Add a form container.
- Add an input text element to the form, with values:
- Label: Name
- Required: true
- Validation type: any
- Add another input text element, with values:
- Label: Email
- Required: true
- Validation type: email
- Add another input text element, with values:
- Label: Age
- Required: false
- Validation type: number
- Add a dropdown element, with values:
- Label: Country
- Required: true
- Options: France, Portugal, United Kingdom, Italy, United Arab Emirates
- Add a checkbox element, with values:
- Label: "Accept terms and conditions"
- Required: true
- Add an input text element to the form, with values:
- Add a form container.
- In edit mode:
- Confirm that you can't hover over the submit button and see the tooltip.
- Confirm that clicking the submit button doesn't submit.
- In preview/published modes:
- Confirm that fields which are required validate based on their validation type correctly.
- Confirm that fields are not required can be left blank, regardless of their validation type.
Merge Request Checklist
-
changelog.md has been updated if required. -
New/updated Premium/Enterprise features are separated correctly in the premium or enterprise folder -
The latest Chrome and Firefox have been used to test any new frontend features -
Documentation has been updated -
Quality Standards are met -
Performance: tables are still fast with 100k+ rows, 100+ field tables -
The redoc API pages have been updated for any REST API changes -
Our custom API docs are updated for changes to endpoints accessed via api tokens -
The UI/UX has been updated following UI Style Guide
Closes #2229 (closed)
Edited by Peter Evans