Last active
January 23, 2019 17:33
-
-
Save dexygen/3edb947c8ef30e3f4faa25969ba03e4a to your computer and use it in GitHub Desktop.
Correcting Annoying Validation, versioning until corrected
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <style> | |
| label { | |
| display: inline-block; | |
| width: 96px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div><label>First Name</label><input id="fname" /></div> | |
| <div id="err4-fname" style="color: red"></div> | |
| <div><label>Last Name</label><input id="lname" /></div> | |
| <div id="err4-lname" style="color: red"></div> | |
| <div><label>City</label><input id="city" /></div> | |
| <script> | |
| let fnameEl = document.getElementById('fname'); | |
| let lnameEl = document.getElementById('lname'); | |
| let lastError; | |
| function confirmEntry() { | |
| let errEl = document.getElementById('err4-' + this.id); | |
| if (this.value) { | |
| errEl.innerHTML = ''; | |
| lastError = ''; | |
| } | |
| else if (lastError) { | |
| lastError.focus(); | |
| } | |
| else { | |
| lastError = this; | |
| errEl.innerHTML = 'The above field is required'; | |
| } | |
| } | |
| fnameEl.focus(); | |
| fnameEl.addEventListener('blur', function() { | |
| confirmEntry.call(this); | |
| }); | |
| lnameEl.addEventListener('blur', function() { | |
| confirmEntry.call(this); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment