UI Design - Form Field Validations Requirements and add to UX Styleguide

[tlebedovich]

The way various forms get validated (via Done button, via dynamic when typing, via after leaving field) are inconsistent across the filings. This ticket is to review all form fields in use and create a UX styleguide for how/when forms get validated

Bonus - create a spreadsheet of the error messages so they also stay consistent across all filings

Review the different types of validations used within Vuetify

Need to think about errors such as:

• invalid spaces (would like to ignore and remove extra spaces)
• invalid email
• max character (should appear as user types)
• invalid characters (ie typing a number is a letter only field)
• required fields not filled out
• Address component (PPR has Country on top)

Continue to use the Done button for most validation unless it helps a user to dynamically see an error when they type in certain cases.

Working Spreadsheet:

https://docs.google.com/spreadsheets/d/1BBE06XQ_rR-N7u2lqzlT5nyfktZrUwMnbIDAiG1CZI4/edit#gid=0 (request access from Yui)

Sample validation spreadsheet from PPR/PHR

Search Validation for MHR

---

This ticket was what kick started this conversation and includes important notes of current validations. Tracey's notes in this ticket were based on listing what's happening in PPR, but that may or may not be what we want as our consistent final solutions (since PPR is also inconsistent): https://app.zenhub.com/workspaces/entities-team-space-6143567664fb320019b81f39/issues/bcgov/entity/11837

[tlebedovich]

@rkim13103 @yuisotozaki @janisrogers @forgeuxGH5 - Ticket I made for form validation to start making notes

[yuisotozaki]

Started a speadsheet to start organizing kinds and types. Please request edit access.

[forgeuxGH5]

A couple of other notes to cover:

• check the MHR sample for some other validations
• include exact validation message text
• include different validations depending on states/modes of the form (e.g., if in some cases some fields are required and in other cases the fields are not required)

[atronse]

Here is the updated file for MHR validation messages that was shared with me. https://docs.google.com/spreadsheets/d/1LnHG5EsKedAy6UgOMw9FbnjSS72TNZsxwSPOwlxCdtw/edit?usp=sharing