Skip to content

Resolve "Add form validation"

Peter Evans requested to merge 2229-add-form-validation into develop

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 call get_data_chunk on the data provider which relates to the key.
  • In the case of FormDataProviderType's implementation of get_data_chunk, the first_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 call is_valid on it with the form value. If the value is invalid, we raise FormDataProviderChunkInvalidException, which in turn will raise a 400 of error "ERROR_WORKFLOW_ACTION_FORM_DATA_INVALID" in DispatchBuilderWorkflowActionView.

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
  • 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

Merge request reports