Scripted <INPUT> Matching With Native Error Reporting

Jason Knight
CodeX
Published in
7 min readNov 15, 2022

--

Most of us working in JS know how to trap “input” and “submit” events for making a “matching input” such as when users are creating new passwords. The problem is that most implementations add paragraphs for nothing to the markup, or require your own error reporting mechanism, or dozens of other workarounds that are inconsistent with the built in browser validation provided by HTML 5.

This is truly sad since they give us a perfectly good mechanism for reporting such errors: HTMLObjectElement.setCustomValidity

As a client I’m doing a few small favors for asked for me to help clean up his attempt at this, I asked if I could share the result with you folks. The way I approached the problem was focused on reusability and ease of hooking it from the markup.

Whenever I solve a problem like this I like to start with a list of what issues could arise and what / when we need to trigger this. Planning before you even think about laying down a line of code is important, and far too often skipped.

  1. use setCustomValidity to set…

--

--

Jason Knight
CodeX

Accessibility and Efficiency Consultant, Web Developer, Musician, and just general pain in the arse