Using HTML Form Validation without a Form (Kinda)

Using HTML Form Validation without a Form (Kinda)

This post is more than 2 years old.

This will be a quick one. I've been a huge fan of HTML-based form validation for some time now. Even though it is far from perfect (and must always be coupled with server-side validation), I love the fact that it can catch errors early in the submission process and create a better experience for users. My first experience with server-side programming was writing Perl scripts to handle forms so anything that improves the process is pretty freaking important to me.

While thinking about another demo I wanted to write (and I sure as hell hope I wrote it down in Trello because I'm drawing a blank on it now) I realized that I'd need to validate some email addresses. While I was fine with a "not perfect" solution, I was curious if there was some way to tie into the browser's email validation when using:

<input type="email" name="forUsToSpamYou" required />

Basically, I wanted the exact same validation as the field provides, but without using user input and a real form. Turns out you can, and it's rather easy, but you still have to use a form.

First, I added a field, and then hid it with CSS, because CSS is awesome like that:

<input type="email" id="testEmail">

<style>
#testEmail {
  display: none;
}
</style>

I then create a set of data. This is hard coded, but imagine it comes from some other process.

let tests = [
  "foo@foo.com",
  "foo",
  "goo@goo.com",
  "zoo"
];

Then to test these values, I just got a reference to the field, set the value, and ran checkValiditity on it:

let emailField = document.querySelector("#testEmail");

tests.forEach(t => {
  emailField.value = t;
  console.log(t, emailField.checkValidity());
});

According to MDN, checkValidity does this: "Returns true if the element's value has no validity problems; false otherwise. If the element is invalid, this method also causes an invalid event at the element."

And here is the result, modified to write out results to a div tag:

See the Pen js check field by Raymond Camden (@cfjedimaster) on CodePen.

To be clear, this is not meant to be perfect email validation. Every time I blog about anything related to the topic, folks point out the 500 edge cases that break it. Again, I'm just looking for something to do more of a "soft" validation on the input. And as I said, I was curious if I could "chain" into the HTML logic without using a real (visible) form. Has anyone used anything like this in production? Let me know in a comment please!

Round Two!

I wrote this blog post last night, but didn't actually promote it online. I was planning on doing that today. But after I posted, all around smart guy Šime Vidas posted a great tip in the comments below. I keep forgetting you can create HTML elements in JavaScript. He modified my code such that there is no HTML form field and no CSS required and you simply create the field in JavaScript like so:

let emailField = document.createElement('input');
emailField.type = 'email';

Here's his CodePen:

See the Pen js check field by Šime Vidas (@simevidas) on CodePen.

Thanks Šime!

Header photo by Klaas on Unsplash

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Šime Vidas posted on 5/15/2019 at 10:50 PM

You can just create the input in JavaScript. No need to add it to the DOM and hide it with CSS. 😁

let emailField = document.createElement('input');
emailField.type = 'email';

https://codepen.io/simevida...

Comment 2 (In reply to #1) by Raymond Camden posted on 5/16/2019 at 11:23 AM

Hah - I keep forgetting you can do that! Thanks. :)

Comment 3 (In reply to #1) by Raymond Camden posted on 5/16/2019 at 11:23 AM

FYI I published this last night, but didn't "socialize" it yet. Going to edit and add your code as a new part to the article and do a CodePen.

Comment 4 (In reply to #3) by Raymond Camden posted on 5/16/2019 at 11:29 AM

And I just noticed your CodePen link. ;)

Comment 5 (In reply to #1) by Raymond Camden posted on 5/16/2019 at 11:47 AM

Please see the update. Look good to you?

Comment 6 (In reply to #3) by Šime Vidas posted on 5/16/2019 at 3:36 PM

Hehe, the RSS advantage.

Comment 7 by christianoliff ☺ posted on 5/17/2019 at 3:44 PM

a bit different, but kind of related. I made a email address validator which checks that an email has a valid TLD - with no JavaScript. It uses the pattern attribute. I wrote about it here and thought you might find it interesting: https://christianoliff.com/...

Comment 8 (In reply to #7) by Raymond Camden posted on 5/17/2019 at 6:52 PM

Cool, thank you for sharing that!

Comment 9 by Hans Spieß posted on 5/22/2019 at 7:38 AM

nice trick, but i don't see the use case. why would you want to validate input but not use the appropriate input element?

Comment 10 (In reply to #9) by Raymond Camden posted on 5/22/2019 at 3:24 PM

As I said, for cases where you don't have users entering the data. So imagine loading in data from a remote API where you want to do additional validation on the strings.

Comment 11 by Farukh Muhammadiev posted on 8/6/2019 at 1:40 PM

Thanks for a great Article Raymond

Comment 12 by Farukh Muhammadiev posted on 8/6/2019 at 1:40 PM

I like this service as well -https://www.mailcheck.co did you use this services as a base

Comment 13 (In reply to #12) by Raymond Camden posted on 8/6/2019 at 2:12 PM

Nope.