Created
January 8, 2021 14:38
-
-
Save kobus1998/0d5bf8c729e5e592a7efa4ad6a9d4529 to your computer and use it in GitHub Desktop.
create custom html5 form rules
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"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Document</title> | |
| </head> | |
| <body> | |
| <form action="/" id="form"> | |
| <input type="text" fixed="abc" id="custom"> | |
| <button>submit</button> | |
| </form> | |
| <script src="main.js"></script> | |
| </body> | |
| </html> |
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
| /* | |
| * @see https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation | |
| */ | |
| let els = document.querySelectorAll('[fixed]') | |
| els.forEach(function (el) { | |
| el.addEventListener('input', function (e) { | |
| let val = this.getAttribute('fixed') // get the fixed rule | |
| if (this.value != val) { | |
| this.setCustomValidity('invalid fixture') // set error message (form won't submit) | |
| } else { | |
| this.setCustomValidity('') // reset error message | |
| } | |
| }) | |
| }) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment