From 1d967b75f0c09d03c855f02ae45b5c9a67a60368 Mon Sep 17 00:00:00 2001 From: coliff Date: Tue, 24 Sep 2024 15:58:50 +0900 Subject: [PATCH 1/2] Formatting Fixes --- .htmlhintrc | 16 ++++----- README.md | 5 +-- index.html | 92 +++++++++++++++++++++++++++++++++++++--------------- package.json | 8 ++--- 4 files changed, 78 insertions(+), 43 deletions(-) diff --git a/.htmlhintrc b/.htmlhintrc index 83ef924..7c09800 100644 --- a/.htmlhintrc +++ b/.htmlhintrc @@ -1,15 +1,15 @@ { - "tagname-lowercase": true, + "alt-require": true, "attr-lowercase": true, + "attr-no-duplication": true, "attr-value-double-quotes": true, + "attr-value-not-empty": false, "doctype-first": true, - "tag-pair": true, - "spec-char-escape": true, + "doctype-html5": true, "id-unique": true, + "spec-char-escape": true, "src-not-empty": true, - "attr-no-duplication": true, - "title-require": true, - "attr-value-not-empty": false, - "alt-require": true, - "doctype-html5": true + "tag-pair": true, + "tagname-lowercase": true, + "title-require": true } \ No newline at end of file diff --git a/README.md b/README.md index b82ba3e..92f45d4 100644 --- a/README.md +++ b/README.md @@ -3,14 +3,13 @@ An email address validator (which includes checking a valid TLD is used) in pure HTML with no JavaScript or dependencies. It could be used to improve the user experience by rejecting mistyped email addresses. ## Where can I see a demo? -https://coliff.github.io/html5-email-regex/ +https://coliff.github.io/html5-email-regex/ ## How does it work? It uses the HTML5 `pattern` attribute and uses the standard email regex [RFC 5322](https://www.w3.org/TR/2012/WD-html-markup-20120320/input.email.html) and expanded to check the end of the email address matches against a list of valid TLDs. - ## Is it safe to use? Kind of, but a few points: @@ -23,7 +22,6 @@ Kind of, but a few points: - It doesn't give meaningful feedback if an email address is mistyped. So if someone enters `janedoe@gmail.con` they'll get an invalid message, but won't specify that the TLD is incorrect. I've used [Verimail](https://github.com/amail/Verimail.js) and [Mailcheck](https://github.com/mailcheck/mailcheck) with success before to give inline feedback on mistyped email addresses. - ## Are there any other recommended HTML attributes to add? - Always use `type="email"` rather than `type="text"` to take advantage of browser-based validation and feedback and provide hints to autocomplete/autofill users email address. @@ -34,7 +32,6 @@ Kind of, but a few points: - If it's an order form/contact form or similar add the `required` tag to prevent submissions when this field is empty. - ## How did you get the list of valid TLDs? I scraped the official list with this command: diff --git a/index.html b/index.html index fb76ced..083f63a 100644 --- a/index.html +++ b/index.html @@ -1,32 +1,70 @@ - + - - - - - Email Address Validator in pure HTML - - - - - - - - - Fork me on GitHub + + + + Email Address Validator in pure HTML + + + + + + +

Email Address Validator in pure HTML

-
- - -
- +
+
+ + +
+
+ diff --git a/package.json b/package.json index 74c6b76..11fd9a9 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "html5-email-regex", "version": "1.0.0", "private": true, - "description": "my-dot-files", + "description": "An email address validator in pure HTML using the pattern attribute", "homepage": "https://github.com/coliff/html5-email-regex", "bugs": { "url": "https://github.com/coliff/html5-email-regex/issues" @@ -18,7 +18,7 @@ "license": "MIT", "author": "C.Oliff (https://christianoliff.com)", "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" - }, - "dependencies": {} + "prettier": "npx prettier --write *.html", + "test": "npx htmlhint **/*.html" + } } From 72686ad3069bc70a36688a5a69b250938408380f Mon Sep 17 00:00:00 2001 From: coliff Date: Tue, 24 Sep 2024 16:00:28 +0900 Subject: [PATCH 2/2] Update index.html --- index.html | 31 +++++++++++++++++-------------- 1 file changed, 17 insertions(+), 14 deletions(-) diff --git a/index.html b/index.html index 083f63a..2d749a7 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,4 @@ - + @@ -8,7 +8,10 @@ name="description" content="An email address validator (which includes checking a valid TLD is used) in pure HTML with no JavaScript" /> - + @@ -54,17 +57,17 @@

Email Address Validator in pure HTML

-
- - -
-
+
+ + +
+