CHEFS BUG - Show validation messages without database submission

Owned by Stephan McColm, created
Last updated: Aug 23, 2024
2 min read

Back to: Bugs/Defect TrackerUNDEFINED

Description:

Summary: 

Observed Bug: 

It is not possible to show validations for more than about a second using a button configured with a custom action and with "show validations selected"

Reproduction Steps:

  1. Start a new CHEFS form.

  2. Place a text component in the form designer window.

  3. Configure the text component such that in the validation tab, the component is "required."

  4. Place a button component in the form designer window.

  5. Configure the button by stating the Display Label: "Validate", the Action: "Custom", and select "Show Validations".

  6. Save the form and preview it.

  7. Without entering any value in the required text field press the "Validate" button.

Observations:

You will see the validation error associated with the text field show up for about a second and then vanish. 

Time <1 seconds.

Source: https://chefs-test.apps.silver.devops.gov.bc.ca/app/form/submit?f=12de1a18-78bc-4e8d-80ae-a7701c4b4bbc

Time > 1 Seconds

Source: https://chefs-test.apps.silver.devops.gov.bc.ca/app/form/submit?f=12de1a18-78bc-4e8d-80ae-a7701c4b4bbc

 

System Info:

Browser: Google Chrome Version 127.0.6533.122 (Official Build) (32-bit)

User-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36
Operating System: Microsoft Windows 10 Enterprise Version 22H2 (OS Build Version 10.0.19045.4780)

Requirement:

We just want to be able to trigger a validation check independently of submitting the form.

Alternative approaches

I’ve tried to configure a button in several ways to trigger “show validations”; one such way was configuring the action to “Event”. When a button configured with its action set as “Event” is in a form, when the button is pressed an error message is presented “Custom button events not supported yet. Event Type: …” This error message breaks the users immersion in the process of filling out their form. Once the ok button associated with this error message is pressed, then the error message is closed and then the validation error(s) are displayed.

James identified the following:

Around line 965 of the app\frontend\src\components\designer\FormViewer.vue
This was introduced by Jason C. 9 months ago, not sure if it was stubbed for a reason but if the alert could change to a console.log then it will work for validation.

    // Custom Event triggered from buttons with Action type "Event"
    onCustomEvent(event) {
      alert(i18n.t('trans.formViewer.customEventAlert', { event: event.type }));
    },

In this video, you can see that if there are multiple fields that are required, after the validation errors are shown, if even one validation requirement is satisfied, all of the error messages disappear. That’s got to be some kind of bug too.