bcgov / bcgov/entity

Edit UI: use off-the-shelf validation tools

Open
#15,661 0 comments 0 reactions 0 assignees View on GitHub
ENTITY - DO NOT USE techdebt
Dominant language
JavaScript
Stars
23
Forks
62
Avg merge
24m
Merged PRs (30d)
1

Description

## TODO
- [ ] Prototype the use of an off-the-shelf validation library using CourtOrderPoa
- [ ] Select a well-documented validation API with plenty of examples so new team members can get up to speed quickly
- [ ] Hide validation errors while users are filling out the form
- [ ] Check validation state and show errors (if necessary) when "submit" button is pressed; don't let user final submit
- [ ] Allow progressive form elements with minimum of configuration

Consider the following tools:
- [ ] Vuetify Forms
- [ ] VeeValidate
- [ ] Vuelidate

## What is the problem?
At present, edit-ui uses a mixture of v-forms and custom validation code to validate forms prior to form submission. Currently, the forms show validation errors as soon as you make a mistake (or entry).

## What is the impact?
Form validation is notoriously tricky. As the complexity of our application increases, we need a flexible and extensible validation system that's well documented and easy to use. We need a tool that allows components to be validated dynamically. If users select a form option that yields subsequent questions (called progressive disclosure) our validation system must be able to accommodate additional questions without having to change the parent logic.

## Proposed solution
Use an off-the-shelf validation API that's well used, well documented and gives us the flexibility we need.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start in the edit-ui area around CourtOrderPoa and review how v-forms and custom validation currently handle submission. Compare Vuetify Forms, VeeValidate, and Vuelidate against the listed requirements; done means selecting and prototyping one API that delays errors until submit, supports progressive fields, and is well documented.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.