diff --git a/content/post/quick-tips-javascript-password-verify.md b/content/post/quick-tips-javascript-password-verify.md new file mode 100644 index 0000000..26864ef --- /dev/null +++ b/content/post/quick-tips-javascript-password-verify.md @@ -0,0 +1,55 @@ +--- +title: "Quick Tips: Javascript Password Verification" +date: 2017-10-28T10:30:49-04:00 +draft: false +--- + +I just had to write client-side password verification for work at [Verodin](https://verodin.com), +and it was kinda fun to do. I'll talk through my approach, and hopefully someone down the road searching +for front-end tips desperately finds this post like a light at the end of a tunnel. + +The main idea is to bind to event listeners on the form inputs we care about, so that we can receive those events +with our password checking functions. As soon as we bind an Object to the event listener, that object has +"subscribed" to those events and will receive messages every time that event happens. + +I will be binding to the [keyup](https://developer.mozilla.org/en-US/docs/Web/Events/keyup) event to provide the user +with password verification as they type! + +The first step is to setup an html form to work with. I also included a `

` tag to hold a meaningful message for the user. + +```html +... +

Choose a password

+
+ + +
+... + +``` + +Once we have this form, we can start coding up some Javascript. We need to write a function that binds to the +`onkeyup` events of both inputs, and then have that function update the page in a meaningful way if the passwords +don't match. First step is to write the function, then the next step is to write the bindings. + +```javascript + +// Verify passwords match, update message element +function verifyPassword() { + var passwordInput = document.getElementById("passwordInput"); + var verifyPassword = document.getElementById("verifyPassword"); + var message = document.getElementById("message"); + + message.textContent = passwordInput.value != verifyPassword.value ? "Not matching" : "Matching"; +} + +// Bind to onkeyup for passwordInput and verifyPassword +document.getElementById("passwordInput").onkeyup = verifyPassword; +document.getElementById("verifyPassword").onkeyup = verifyPassword; +``` + +`verifyPassword` will now receive messages every time the keyup event fires when `passwordInput` or `verifyPassword` are +in focus (when users are typing in those boxes). The verification function will update the message box accordingly and alert the user +in real time if the passwords they type match! + +Thanks for reading, any tips, comments, concerns, or suggestions, leave me a comment below! \ No newline at end of file