Change display of input error message so that it only appears after a user has clicked out of the input

[exalate-issue-sync[bot]]

USER STORY:

As a user entering data in a form, I want to see any red error messages for a input I’m entering data into only after I am done entering the data and have clicked out of the input.

Example of entering data in the ELECTION FILING PASSWORD field but have yet to type in 8 or more characters:

Example of the ELECTION YEAR input displaying the error message after a single digit is typed into the input:

QA Notes

null

DEV Notes

null

Design

FECFILE-1493

[exalate-issue-sync[bot]]

Matt Travers commented: [~accountid:627ebeb2236090006f61d37d] The form change has broken the e2e tests.

[https://app.circleci.com/pipelines/github/fecgov/fecfile-web-app/6071/workflows/9754bb68-6d41-4dcb-98fd-43a1add1f9b7/jobs/20978|https://app.circleci.com/pipelines/github/fecgov/fecfile-web-app/6071/workflows/9754bb68-6d41-4dcb-98fd-43a1add1f9b7/jobs/20978]

!image-20240725-213450.png|width=930,height=577,alt="image-20240725-213450.png"!

Sending ticket back to “In Progress”.

[exalate-issue-sync[bot]]

Matt Travers commented: Passes CR. Sending to QA.

[exalate-issue-sync[bot]]

Shelly Wise commented: QA review verified the “ELECTRONIC FILING PASSWORD” field is still displaying the error “red text” “This field must contain at least 8 alphanumeric characters” upon starting to enter password. This error should be once you click out of this field and submit.

!image-20240805-183151.png|width=591,height=155,alt="image-20240805-183151.png"!

Same functionality still broke with the following:

!image-20240805-183750.png|width=737,height=188,alt="image-20240805-183750.png"!

[~accountid:61b0b42cc510bc006b5c03ed] [~accountid:712020:2a1493e5-adee-45bd-b27e-868a5c8d3f62] [~accountid:627ebeb2236090006f61d37d] returning to in-progress.

[exalate-issue-sync[bot]]

Todd Lees commented: passes CR moving to QA

[exalate-issue-sync[bot]]

Shelly Wise commented: QA review verified upon typing in “ELECTRONIC FILING PASSWORD” field the error “red text” is not displayed. This error should be once you click out of this field and submit is fixed and working correctly.

Verified upon entering “ELECTRONIC FILING PASSWORD” when entering must contain at least 8 alphanumeric characters the following red text error is displayed “This field must contain at least 8 alphanumeric characters.”

!image-20240807-161804.png|width=982,height=209,alt="image-20240807-161804.png"!

Verified upon entering “ELECTRONIC FILING PASSWORD” when entering more the 16 alphanumeric characters the following red text error is displayed “This field cannot contain more than 16 alphanumeric characters.”

!image-20240807-161936.png|width=921,height=184,alt="image-20240807-161936.png"!

Verified upon entering “ELECTRONIC FILING PASSWORD” when entering the incorrect format for password the following red text error is displayed correctly “Must contain at least one upper case letter (A -Z), at least one lower case letter (a - z), at least one digit (0 - 9), and at least one special character ( !@#$%&() )”*

!image-20240807-161644.png|width=982,height=361,alt="image-20240807-161644.png"!

Also tested other fields with same functionality.

QA Review Completed. Moved to Stage Ready.

[exalate-issue-sync[bot]]

Sprint accepted by Paul Clark during sprint review on 8/20/2024.