bookercodes/compareto

:zap: Custom HTML5 element attribute that compares two passwords. https://alexbooker.github.io/compareTo/

Hi there 👋

• My name's Alex and I work at @Scrimba where I host The Scrimba Podcast, make YouTube videos, and support writers on the company blog
• Before all that, I was a (mostly JavaScript) Full-Stack Web Developer and Developer Advocate
• You can still find some of my projects and contributions here on GitHub but I don't code as much as I would like 👾!

Projects

• [Scrimba Discord Onboarding Bot] (private repo 🔑)
• Base16 Builder
• Password Generator A humble password generator that later became part of Privacy Tools
• Memento Generate and verify ephemeral tokens (like password reset tokens)
• Mongoose Extract Duplicate Field Extract the name of a duplicate field
• EggHead.io Downloader
• compareTo
• lunar-api
• Community Casts
• Community Casts rewrite
• Cognito User Pool Demo
• Realtime chat with Pusher
• Genius API client
• Apollo
• GitHub Unfollow Everyone
• Tiny Care Bot
• Parallel Parking Simulator
• Tool to pick random Tweet with hashtag
• GitHub Unstar All

compareto's Issues

JavaScript errors

At the moment, if the no element with the name attribute specified by the compareTo attribute can be found, compareTo fails silently. It would be nice if an error was displayed in the console. Similarly, when more than one matching element is found, nothing happens.

Drop jQuery dependency

jQuery is not really needed in this case, I don't think. Having to reference it can be an inconvenience and so, I want to drop jQuery in favour of "vanilla JavaScript".

Only look for input elements with the name attribute in the same form

Research browser compatibility

I am fairly sure compareTo works on IE10+.

I do not think setCustomValidity works in IE9.

Update readme

Update the readme to reflect

• the new compareToError attribute
• the new errors
• the fact that, users can have multiple compareTo elements on the same page.

All of these changes, by the way, are courtesy of @GarysCorner!

Custom error message

If someone wants to change the error message, they should be able to do so using an attribute, comparisonErrorText:

<input type="password" name="password" required>
<input type="password" compareTo="password" comparisonErrorText="custom error here">

This will also be useful in the case that the user wants to compare something other than passwords.