Sitecore’s Web Forms for Marketers (WFFM) does many things well, but some of the required field styling is a little on the clunky side. For example, if a required field is not filled out by a user, on submit WFFM will display a validation summary at the top of the form with errors for the user to indicate which fields were not filled out.  WFFM will also tag the ‘required’ character next to the field (an asterisk) with a class named ‘scfValidatorRequired’.

However, the input field that the user did not fill out is not decorated in any way. This means there is no CSS class on the field that you can target directly for styling. A user scanning the form may not immediately see where the error is. I wanted to highlight these fields so that the user could quickly find them and below I’ll show you how to do that.

Example WFFM output

The below example code is a trimmed down version of the markup that WFFM generates when a user submits the form and a required field is not filled out:

<div class="scfSingleLineTextBorder">
       <label class="scfSingleLineTextLabel">First name</label>
       <div class="scfSingleLineGeneralPanel">
              <input type="text" class="scfSingleLineTextBox" maxlength="256">
       </div>
       <span class="scfValidatorRequired" title="First name must be filled out.">*</span>
</div>

The solution

A little jQuery can help you out here. You can use a selector to find all the validator required blocks and then update the style on the previous sibling. In my example, I wanted to target specific types of input fields directly so that they could be highlighted:

//Highlight WFFM fields that have required validator that failed
$('.scfValidatorRequired').each(function() {
	$j(this).prev().find('input').addClass('ui-state-highlight');
	$j(this).prev().find('select').addClass('ui-state-highlight');
	$j(this).prev().find('textarea').addClass('ui-state-highlight');
});

Once you’ve targeted the span which has the scfValidatorRequired class, you can then do whatever styling you want using jQuery selectors to achieve what you need!

Update: My colleague Manoel (@manoeldossantos) made an excellent point that ideally you should target the wrapping ‘div’ that contains both the label and the input. This adds flexibility for different design approaches, such as highlighting the label or changing the background of the row.

In my particular scenario, I wanted to target the input elements specifically, but any jQuery selector should work, so long as you target the scfValidatorRequired span first!