Solidify Form validation and submission pattern

[levithomason]

🪲 As a vendor, I want to know what registration fields are required, so that I don't skip important information

---

• Create a working example form with validation, submission, and data handling (serializing).

Semantic UI form validation is built in and works with the form state and messages. We may or may not want to use this, but it should be understood before making final decisions.

[levithomason]

Consider also AngularJS Forms. They provide a very robust solution around form validation and input state. Most appreciated is the fact that all form fields are automatically validated based on their HTML attributes (required, min, max, etc.) and these validations are consolidated into the formName.$valid value.

With this it is trivial to disable a submit button for a form if it is not valid (in React psuedo code):

<Button disabled={!this.refs.formName.isValid`}>Submit</Button>

Initial thoughts and proposal for Stardust forms inspired heavily by AngularJS with some tweaks:

Inputs

• validate each form input based on it's html attributes
• expose validation properties and methods that can be accessed via a ref
• methods for setting validation state

Fields

• aggregate validation from inputs inside the <Field />/<Fields />
• expose validation properties and methods that can be accessed via a ref
• methods for setting validation state

Forms

• aggregate validation from inputs/fields inside the <Form />
• expose validation properties and methods that can be accessed via a ref
• methods for setting validation state

Classes
Flexible here as there are lots of opinions involved, but starting with something for us to go on.

• apply validation classes on blur of a dirty input

[levithomason]

Related to TechnologyAdvice/unity-blog#197 TechnologyAdvice/unity-blog#201

[ghost]

+100 for good documentation

[levithomason]

:D

[ghost]

Regarding approach here's a relevant opinion from Michael Bleigh:

Paragraphs, sections, articles, and lists are semantics that make sense in the context of a document, not an application.

However, his argument was not intended to sacrifice the *ilities of the Web, only to challenge the status quo. And I personally have had good luck leaning into Web semantics as a way to help ensure better accessibility while also providing a familiar pattern to hold onto while coding web forms in single-page apps.

Given Semantic UI doesn't actually use good form semantics I'm going to start spiking towards a solution with markup semantics similar to that of Angular's, referencing the SUI docs and form.js for feature parity with a behavior rewrite, using Material UI where possible for implementation patterns.

[levithomason]

These basics were added in #130, see #131 for continued iteration.