Yup validation for SHAS intake form #74

wilwong89 · 2024-05-11T01:56:53Z

Description

Added frontend validation to new intake form.
Some minor UI adjustments (new error messages, margin/padding) to validation error messages

Types of changes

New feature (non-breaking change which adds functionality)

Checklist

I have read the CONTRIBUTING doc
I have checked that unit tests pass locally with my changes
I have added tests that prove my fix is effective or that my feature works
I have added necessary documentation (if appropriate)

Further comments

PR to existing feature/intake-form branch

github-actions · 2024-05-11T01:57:37Z

Coverage Report (Application)

Totals
Statements:	51.4% ( 680 / 1323 )
Methods:	40.93% ( 106 / 259 )
Lines:	63.82% ( 448 / 702 )
Branches:	34.81% ( 126 / 362 )

github-actions · 2024-05-11T01:57:56Z

Coverage Report (Frontend)

Totals
Statements:	33.49% ( 973 / 2905 )
Methods:	30.92% ( 179 / 579 )
Lines:	36.32% ( 571 / 1572 )
Branches:	29.58% ( 223 / 754 )

slhurley · 2024-05-14T21:14:08Z

For me there is some odd validation behaviour.

Email doesn't validate as a valid email address at all
Lat/long didn't validate but then it did...I think it depends if you have clicked Submit or not and come back to it.
Last verified date on the permits can't be a required field because they might not know it.
I got a red toast after confirmation with Axios 500 so presumably the final saving after validation is not working
The Submit button is only available on the final tab. That "might" be ok the first time but after they submitted and failed once, if they fix something on a previous tab they are forced back to the final tab to re-submit.
Also if the submission fails because of a required field on a previous tab, you don't get a message so you have no idea what you did wrong...it just does nothing. You have to go back and find the red boxes.
Is Project Name really a mandatory field? (Subin to confirm)
I think validation should happen on the "next tab" as well so you don't have to wait to find out you forgot something.

Subin1Doo · 2024-05-14T22:16:56Z

On top of Sharolyn's comment

I agree with her comment on the submit button only being available on the last page, something I didn't think through.. We should make it activated on every tab
Once they click submit and there are missing fields - can we have an alert banner? should be visible in all tabs with missing tabs (Part of my Figma design)
once they click the page should kind of jump to the top of the page so they can see the alert banner without having to scroll
Can the name of the tabs with missing fields change to red? (also in my Figma) If the Basic info tab had missing fields "Basic info" will turn red so they know which tabs to revisit right away
Error messages, change font color to red and decrease font size by a little bit
Put a bit of space between error message and type fields/ radio buttons
Project name is a mandatory field in SHAS right now
Probably bc this section got added today.. Natural disaster question doesn't get error message/ highlighted in red

kyle1morel · 2024-05-14T22:05:35Z

frontend/src/components/intake/ShasIntakeSchema.ts

+      firstName: stringRequired.label('First name'),
+      lastName: stringRequired.label('Last name'),
+      phoneNumber: stringRequired.label('Phone number'),
+      email: stringRequired.label('Email'),


Should be validating against a email regex

export const Regex = Object.freeze({ // https://emailregex.com/ // HTML5 - Modified to require domain of at least 2 characters EMAIL: '^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\\.[a-zA-Z0-9-]{2,})+$' });

kyle1morel · 2024-05-14T22:10:30Z

frontend/src/components/intake/ShasIntakeSchema.ts

+
+// Form validation schema
+const YesNoUnsureSchema = string().required().oneOf(YesNoUnsure);
+const prevYesSelected = (prevQuestion: string) => prevQuestion === BASIC_RESPONSES.YES;


I'm not feeling the necessity of pulling this little bit out into it's own function?

kyle1morel · 2024-05-14T22:13:51Z

frontend/src/components/intake/ShasIntakeSchema.ts

+    basic: object({
+      isDevelopedByCompanyOrOrg: string().required().oneOf(YesNo).label('Project developed'),
+      isDevelopedInBC: string().when('isDevelopedByCompanyOrOrg', {
+        is: (previousQuestion: string) => previousQuestion === BASIC_RESPONSES.YES,


This naming threw me off for a bit. May be better to just stick to calling it value as there is no true context tie to the previous form value outside of the current layout. The actual value coming in is whatever is defined in the when.

kyle1morel · 2024-05-14T22:19:56Z

frontend/src/components/intake/ShasIntakeSchema.ts

+    location: object({
+      projectLocation: string().required().label('Location'),
+      streetAddress: string().when('projectLocation', {
+        is: (prevQuestion: string) => prevQuestion === ProjectLocation[0],


Should import the constants in this file and check directly against them. If someone were to inadvertently flip the array values around the validation would explode.

kyle1morel · 2024-05-14T22:21:51Z

frontend/src/components/intake/ShasIntakeSchema.ts

+    }),
+    appliedPermits: array().of(
+      object({
+        permitTypeId: number().required().max(255).label('Permit type'),


Should not have max here. While it's entirely unlikely the permit type IDs will go beyond this it could happen.

Subin1Doo · 2024-05-17T23:08:22Z

Alert banner says "one of more..." It should say "one or more..."
Can we also change the font color of "...is a required field" messages to red and decrease the font size a little bit?
Has this been done? "Put a bit of space between error message and type fields/ radio buttons."

Everything else looks good to me!

Thanks!!

kyle1morel · 2024-05-21T21:58:21Z

frontend/src/components/intake/ShasIntakeForm.vue

+  document.getElementById('form')?.scrollIntoView({ behavior: 'smooth' });
+}
+
+function value(data: any) {


Unclear function name. Not sure why it was renamed from confirmSubmit

kyle1morel · 2024-05-21T22:00:48Z

frontend/src/components/intake/ShasIntakeForm.vue

@@ -161,9 +171,23 @@ onBeforeMount(async () => {
              :click-callback="clickCallback"
              title="Basic info"
              icon="fa-user"
+              :class="{
+                'p-red':


The p- prefix is a primevue directive. We should not be using it in our own code. app-error-color or something would be a better fit, and added into our main.scss

kyle1morel · 2024-05-21T22:02:04Z

frontend/src/components/intake/ShasIntakeForm.vue

@@ -302,9 +326,19 @@ onBeforeMount(async () => {
              :click-callback="clickCallback"
              title="Housing"
              icon="fa-house"
+              :class="{ 'p-red': validationErrors.includes('housing') }"


Magic string. Should be referencing INTAKE_FORM_CATEGORIES. Same css class name comment as above.

kyle1morel · 2024-05-21T22:02:49Z

frontend/src/components/intake/ShasIntakeForm.vue

@@ -900,9 +955,23 @@ onBeforeMount(async () => {
              :click-callback="clickCallback"
              title="Permits & Reports"
              icon="fa-file"
+              :class="{
+                'p-red':


The p- prefix is a primevue directive. We should not be using it in our own code. app-error-color or something would be a better fit, and added into our main.scss

kyle1morel · 2024-05-21T22:04:00Z

frontend/src/components/intake/ShasIntakeSchema.ts

+const YesNoUnsureSchema = string().required().oneOf(YesNoUnsure);
+const stringRequired = string().required().max(255);


Naming styles should be similar. Consider StringRequiredSchema?

…eForm Update PrimeVue to 3.52.0 Rebase to latest ShasIntakeForm.vue changes Integrate multiple WIP intake form validation rules Additional validation error message handling

kyle1morel force-pushed the feature/intake-form branch 2 times, most recently from 65d14a6 to 6d286aa Compare May 14, 2024 18:47

wilwong89 marked this pull request as ready for review May 14, 2024 20:30

wilwong89 requested a review from kyle1morel as a code owner May 14, 2024 20:30

wilwong89 force-pushed the feature/intake-form-validation branch 2 times, most recently from 6ff69f5 to d690a42 Compare May 14, 2024 20:44

kyle1morel reviewed May 14, 2024

View reviewed changes

kyle1morel requested a review from sanjaytkbabu May 16, 2024 19:25

wilwong89 force-pushed the feature/intake-form-validation branch from 04eeecc to 0da0f72 Compare May 17, 2024 01:50

sanjaytkbabu approved these changes May 17, 2024

View reviewed changes

wilwong89 force-pushed the feature/intake-form-validation branch from 0da0f72 to 36b3004 Compare May 21, 2024 16:51

kyle1morel changed the title ~~Feature/intake form validation~~ Yup validation for SHAS intake form May 21, 2024

kyle1morel reviewed May 21, 2024

View reviewed changes

wilwong89 force-pushed the feature/intake-form-validation branch from 36b3004 to fa17281 Compare May 21, 2024 22:44

kyle1morel approved these changes May 21, 2024

View reviewed changes

kyle1morel force-pushed the feature/intake-form-validation branch from d568020 to fa17281 Compare May 21, 2024 23:06

sanjaytkbabu and others added 6 commits May 21, 2024 16:08

housing validation

8387a25

location validation

2038e56

Update to PrimeVue 3.52.0, add validation functionality for ShasIntak…

7f74a90

…eForm Update PrimeVue to 3.52.0 Rebase to latest ShasIntakeForm.vue changes Integrate multiple WIP intake form validation rules Additional validation error message handling

Adjustments to schema, add preliminary units tests for intake validation

6db3846

Update UI to display form errors

4d49efa

Resolve merge conflicts

98ddbf2

kyle1morel force-pushed the feature/intake-form-validation branch from fa17281 to 98ddbf2 Compare May 21, 2024 23:12

kyle1morel merged commit cdf13ee into feature/intake-form May 21, 2024
16 of 17 checks passed

kyle1morel deleted the feature/intake-form-validation branch May 21, 2024 23:16

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Yup validation for SHAS intake form #74

Yup validation for SHAS intake form #74

wilwong89 commented May 11, 2024

github-actions bot commented May 11, 2024 •

edited

Loading

github-actions bot commented May 11, 2024 •

edited

Loading

slhurley commented May 14, 2024

Subin1Doo commented May 14, 2024

kyle1morel May 14, 2024

kyle1morel May 14, 2024

kyle1morel May 14, 2024

kyle1morel May 14, 2024 •

edited

Loading

kyle1morel May 14, 2024

Subin1Doo commented May 17, 2024

kyle1morel May 21, 2024

kyle1morel May 21, 2024 •

edited

Loading

kyle1morel May 21, 2024

kyle1morel May 21, 2024 •

edited

Loading

kyle1morel May 21, 2024

		const YesNoUnsureSchema = string().required().oneOf(YesNoUnsure);
		const stringRequired = string().required().max(255);

Yup validation for SHAS intake form #74

Yup validation for SHAS intake form #74

Conversation

wilwong89 commented May 11, 2024

Description

Types of changes

Checklist

Further comments

github-actions bot commented May 11, 2024 • edited Loading

Coverage Report (Application)

github-actions bot commented May 11, 2024 • edited Loading

Coverage Report (Frontend)

slhurley commented May 14, 2024

Subin1Doo commented May 14, 2024

kyle1morel May 14, 2024

Choose a reason for hiding this comment

kyle1morel May 14, 2024

Choose a reason for hiding this comment

kyle1morel May 14, 2024

Choose a reason for hiding this comment

kyle1morel May 14, 2024 • edited Loading

Choose a reason for hiding this comment

kyle1morel May 14, 2024

Choose a reason for hiding this comment

Subin1Doo commented May 17, 2024

kyle1morel May 21, 2024

Choose a reason for hiding this comment

kyle1morel May 21, 2024 • edited Loading

Choose a reason for hiding this comment

kyle1morel May 21, 2024

Choose a reason for hiding this comment

kyle1morel May 21, 2024 • edited Loading

Choose a reason for hiding this comment

kyle1morel May 21, 2024

Choose a reason for hiding this comment

github-actions bot commented May 11, 2024 •

edited

Loading

github-actions bot commented May 11, 2024 •

edited

Loading

kyle1morel May 14, 2024 •

edited

Loading

kyle1morel May 21, 2024 •

edited

Loading

kyle1morel May 21, 2024 •

edited

Loading