Display Form <progress>

Imagine you have a form with 10 required fields on it. That’s a bit larger than your average form on the internet and a good bit of work for a user. You might lose some users along the way, which is never a good thing. Perhaps to encourage finishing the form, you let them know how close to completion they are, and display motivational messages along the way.

1. HTML for Required Inputs

Inputs wouldn’t necessarily need to be required for this demo, but it makes for a clean demo. Filling out an optional field doesn’t bring you any closer to the minimum requirements for submitting a form. So for this demo, we’ll have 5 required fields down a typical form that collects information for payment.

<form id="payment-form" action="#">
  
   <label for="name">Full Name</label>
   <input required id="name" name="name">

   <!-- etc -->

</form>

2. HTML for Progress

There is an HTML element specifically for visually displaying progress. Literally, <progress>. Let’s have one of these available (with an ID so it’s easy to target with JavaScript). Place it where you will.

<progress max="100" value="0" id="progress"></progress>

Making the max attribute 100 means for easy math. The progress bar is as full as the value in percentage is. E.g. value="20" == bar is 20% full.

3. Watch for Changes

We’ll use jQuery here to make event binding and element selection easy. All our inputs here will be text-y, making keyboard events relevant. So…

$("#payment-form input").keyup(function() {
  
  // calculate progress

});

4. Count Number of Valid Inputs

Whether or not any particular input is valid or not in its current state is part of the DOM now. Once we have a pointer to it, we just check this.validity.valid for true or false.

var numValid = 0;
$("#payment-form input[required]").each(function() {
    if (this.validity.valid) {
        numValid++;
    }
});

5. Adjust the Progress Bar / Display Messages

Now that we have an integer of how many inputs are valid, we just set up some basic logic to adjust the progress bar’s current value.

This is where we could also display our motivational messages. Perhaps there is a <p> element somewhere on the page which we have a pointer to (progressMessage) and we simply adjust the text inside it to match the progress.

// "Cached" somewhere once
var progress = $("#progress"),
    progressMessage = $("#progressMessage");

// Logic that runs after counting every time
if (numValid == 0) {
    progress.attr("value", "0");
    progressMessage.text("The form, it wants you.");
}
if (numValid == 1) {
    progress.attr("value", "20");
    progressMessage.text("There you go, great start!");
}

Browser Support

If browser support is a concern, you’ll probably want to run a little Modernizr test first. If it passes, then load scripts, inject elements, however you want to handle it.

if (Modernizr.input.required) {

  // Modernizr.load, inject elements, whatever.

}

If you need more help on that, read this article.

Demo on CodePen

Do whatever you’d like with it.