Using HTML Form Validation without a Form (Kinda)
Tags: html, javascript
Published: 2019-05-16 17:49:01

---
title: Using HTML Form Validation without a Form (Kinda)
published: true
tags: html5,javascript
canonical_url: https://www.raymondcamden.com/2019/05/15/using-html-form-validation-without-a-form-kinda
---

This will be a quick one. I’ve been a _huge_ fan of [HTML-based form validation](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/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:

{% codepen https://codepen.io/cfjedimaster/pen/ZNBjYJ %}

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](https://twitter.com/simevidas) 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:

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

Here's his CodePen:

{% codepen https://codepen.io/simevidas/pen/JqWWzo %}