Category: form validation

Why Use a Third-Party Form Validation Library?

We’ve just wrapped up a great series of posts from Chris Ferdinandi on modern form validation. It starts here. These days, browsers have quite a few built-in tools for handling form validation including HTML attributes that can do quite a bit on their own, and a JavaScript API that can do even more. Chris even sh...

Form Validation – Part 4: Validating the MailChimp Subscribe Form

Over the last few articles in this series, we’ve learned how to use a handful of input types and validation attributes to natively validate forms. We’ve learned how to use the Constraint Validation API to enhance the native browser validation process for a better overall user experience. And we wrote a poly...

Form Validation Part 3: A Validity State API Polyfill

In the last article in this series, we built a lightweight script (6kb, 2.7kb minified) using the Validity State API to enhance the native form validation experience. It works in all modern browsers and provides support IE support back to IE10. But, there are some browser gotchas. Not every browser supports every Valid...

Form Validation Part 2: The Constraint Validation API (JavaScript)

In my last article, I showed you how to use native browser form validation through a combination of semantic input types (for example, <input type="email">) and validation attributes (such as required and pattern). While incredibly easy and super lightweight, this approach does have a few shortcomings. You can s...

Form Validation Part 1: Constraint Validation in HTML

Most JavaScript form validation libraries are large, and often require other libraries like jQuery. For example, MailChimp’s embeddable form includes a 140kb validation file (minified). It includes the entire jQuery library, a third-party form validation plugin, and some custom MailChimp code. In fact, that setup...

Basic jQuery Form Validation Example (2mins)

This popular article was updated on 18th August, 2016 to correct some minor errors and reflect the current version of the library. This tutorial shows you how to set up a basic form validation with jQuery, demonstrated by a registration form. We’re going to use the jQuery Validation Plugin to validate our form. T...

Regular Expressions in JavaScript

Even if Perl looks like spaghetti to you and you feel that no mere mortal is equipped to manage a Unix system, the fact that JavaScript includes support for Perl-style regular expressions is good news… trust us! Continue reading %Regular Expressions in JavaScript% ...

Drupal 8 Entity Validation and Typed Data Demonstration

In the previous article of this series we’ve started our dive into the Entity Validation and Typed Data APIs. We’ve seen how DataType plugins interact with data definitions and how various constraints can be added to the latter at multiple levels and extension points. In this part, we will cover the aspect of actu...

A Closer Look at Angular’s ngMessages Module

This article was peer reviewed by Marc Towler and Stephan Max. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be! Because of its ability to help developers craft better user experiences when building forms, the ngMessages module became a core directive with the release of Ang...

How to Build a File Upload Form with Express and Dropzone.js

This article was peer reviewed by Panayiotis Velisarakos, Taulant Spahiu and Nilson Jacques. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be! Let’s face it, nobody likes forms. Developers don’t like building them, designers don’t particularly enjoy styling them and us...