Improve UX of browser-based validations

[omahane]

User Story or Problem Statement

As an editor who is filling out content, I want as consistent a user experience as possible when I forget to fill out required fields.

Acceptance Criteria

• Make the UX more like Clientside Validation by adding red borders to fields that are required
• Do not adversely affect the Clientside Validation
• Do not add borders to fields that wouldn't get them with Clientside Validation
  • Note: <select> fields seem to be immune to the CSS or Clientside Validation

Implementation steps

With the implementation of Clientside Validation changes to exempt certain forms, the UX has changed a bit to make it less easy to see which required fields an editor missed before submitting the form. Adding a CSS change could align them better.

Clientside Validation UX

Proposed UX for required fields on forms not using Clientside Validation

Design principles

Veteran-centered

• Single source of truth: Increase reliability and consistency of content on VA.gov by providing a single source of truth.
• Accessible, plain language: Provide guardrails and guidelines to ensure content quality.
• Purposely structured content: Ensure Content API can deliver content whose meaning matches its structure.
• Content lifecycle governance: Produce tools, processes and policies to maintain content quality throughout its lifecycle.

Editor-centered

• Purpose-driven: Create an opportunity to involve the editor community in VA’s mission and content strategy goals.
• Efficient: Remove distractions and create clear, straightforward paths to get the job done.
• Approachable: Offer friendly guidance over authoritative instruction.
• Consistent: Reduce user’s mental load by allowing them to fall back on pattern recognition to complete tasks.
• Empowering: Provide clear information to help editors make decisions about their work.

[jilladams]

On submit with empty required fields, I get the red outline. The tooltip does say "Please fill out this field" at first, and that goes away after you click on the field.

'

Closing!