Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • A a11yproject.com
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 40
    • Issues 40
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 10
    • Merge requests 10
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • The A11Y Project
  • a11yproject.com
  • Merge requests
  • !1082

Add custom form validation for Contact and Newsletter forms

  • Review changes

  • Download
  • Email patches
  • Plain diff
Merged Administrator requested to merge github/fork/jendowns/1057_form-error-handling into main Aug 23, 2020
  • Overview 8
  • Commits 8
  • Pipelines 0
  • Changes 8

Created by: jendowns

Resolves #1057 (closed)

Summary of changes

Build

  • Use gulp-uglify-es (this was a bit of a personal pref when writing these functions, to make things easier with template strings and so forth. Please let me know if you have any concerns about this vs gulp-uglify!)
  • Do not purge styles with c-form class names (this is specifically to keep error message related styles from being removed)

CSS

  • Add styling for error wrapper, summary, and message (link) elements.

Markup

  • Use novalidate attribute on forms to prevent default HTML5 validation. This was necessary because otherwise, the HTML5 validation would take control after submitting invalid form fields -- it would generate its own tooltips & then move focus to the first invalid field. With novalidate, we can control focus after submit (and in this case, send focus to the first error message link).

JS

  • Add submit handler and functions to validate, add error messages, clean up, etc. Note that for the email validation, I kept the validation as close to the default HTML5 email validation as possible... it only requires one character + @ + another character (i.e., like a@a). I think the only way to truly check an email address is to try to send an email to it, and this regex is more geared toward helping people catch common mistakes.

That's a general summary of the changes. Please let me know what you think! I tried to add notes here and there, but let me know if they are too verbose, etc. Thank you!

Assignee
Assign to
Reviewers
Request review from
Time tracking
Source branch: github/fork/jendowns/1057_form-error-handling