Whoever came up with the saying "There's only so many ways to skin a cat." clearly has never seen the innumerable form styles that the internet spits out every day. The problem is simple: we as developers/designers/people need to convey to a user, that we can't talk to, what they must put in for the site to give them the response they want. Why this simple thing is so hard to actually do probably stems from the fact that there's no skeuomorphism to fall back onto to train users with. There's no defined cue on a paper form to indicate "required" short of writing "required" next to the field name.

That's a little verbose for the world of the web, and in the world of the mobile web that's far too verbose.

So we all settled on the *, or some variant of it.

But lets face it. That's pretty ugly. It's usually poorly implemented to the point of not being obvious enough either.

Lipstick on a Pig

When I was presented with the issue of need to cue users into a required form field I didn't really feel like reinventing the wheel. So I did the next easiest thing, I just polished it up a bit.

For those of us blessed with using ASP.NET's models to generate forms we end up with something like this:

<input class="form-control" data-val="true" data-val-required="The Username field is required." id="Username" name="Username" type="text">

Using jQuery.validation it will auto output the data-val-required message next to the input when trying to submit a form, and not let them submit to the value is valid. It's a nice feature, but it doesn't add anything to the auto generated label to notify the user of this requirement.

So I came up with two lines of jQuery and some CSS to solve it for me.

/* positions the asterisks */
.required-parent {
    position: relative;
}
/* the asterisks */
.required {
    color: #a94442;
    top: 35px;
    left: -7px;
    position: absolute;
}

And the JavaScript.

$(document).ready(function () {
    $(".form-control[data-val-required]").parent().addClass("required-parent");
    $(".form-control[data-val-required]").after("<span class='glyphicon glyphicon-asterisk required'></span>");
});

Done!

form field example

While this particular example requires jQuery, Bootstrap and Glyphicon it would be really easy to make it work with any other libraries you wanted.

About Author

Siva Katir

Siva Katir

Senior Software Engineer working at PlayFab in Seattle Washington.