Love is great, but not as a password. — Matt Mullenweg

Preventing bad form information is a deadly game of cat and also cat. As web developers, we want to protect the information filled out in form fields. Bad information leads to bad user interactions, bad analytics and bad sales.

Take the all important “email” field. Email addresses should always have the same structure: sometext@webdomain.extention . A real world example would be: legal@medium.com. An email form field should check if the user has entered an email address correctly. An email address has some text, followed by the @ symbol, then a domain name, a dot (.) and finally an extension. That’s a lot to check for.

An age-old question is “where do we check for valid input: server-side or client-side?” Server-side checking entails the user submitting the form to the server, such as ASP, C# or PHP, then the server code checks and returns an error if it finds one. This is a lengthy and costly trip. Client-side validation usually means: JavaScript intercepting the form before it’s submitted to check for errors, possibly using regex. This saves the trip to the server but still uses a bit of code. While we should still use server-side validation, I’m going to discuss how we can make the most of client-side validation to reduce the number server requests.

HTML5 brought us several <input> types such as “number”, “date” and “email”.

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

By default, email input fields track the state of the entered text as if we used JavaScript and regex to check the pattern. If you wanted to write the same regex out, it would look like this:

/^[a-zA-Z0–9.!#$%&’*+\/=?^_`{|}~-]+@[a-zA-Z0–9](?:[a-zA-Z0–9-]{0,61} [a-zA-Z0–9])?(?:\.[a-zA-Z0–9](?:[a-zA-Z0–9-]{0,61}[a-zA-Z0–9])?)*$/

Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email#Basic_validation

Using the email type, we can check the validity of the form field with a javascript function called… checkValidity() . This function returns a true|false value. checkValidity() will look at the input type as well as if the required attribute was set and any pattern="" tag .

<input type="email" id="emailField" required>

Support for checkValidity() works for all browsers including ie10 and iOS. https://caniuse.com/#feat=form-validation

const isValidEmail = emailField.checkValidity();

We can check form values before we submit the form.

if ( isValidEmail ) {

...submit the form

} else {

...notify user

}

Checking as the user types is a matter of adding the right event listener to the input field. Using keyup gives immediate feedback as the user types in the input field itself.

emailField.addEventListener('keyup', function (event) {

isValidEmail = emailField.checkValidity();

});

We could also prevent the user from submitting the form until the text is valid. Adding disabled to a <button> will prevent submission and after checking validity, we could re-enable it. The disabled state lets users know the form needs to be filled out properly and prevents any unwanted submissions.

<button id="okButton" disabled>OK</button>

Checking for validity we can change the state of the button with .disabled = true|false :

if ( isEmailValid ) {

okButton.disabled = false;

} else {

okButton.disabled = true;

}

Putting it all together could look like this:

No longer, do we need crazy long regex patterns to validate form fields. Using the html attributes we have available as well as some hard-working, built-in JavaScript functions, we can do simple client-side form validation.