Required Fields in SPARK Forms

This article will use SPARK and some basic CSS to style a form to have required fields. 

Begin with a structure for your form fields. In my example, I use a horizontal layout that contains two vertical layouts, each of which contain my form controls (A few Text controls, one integer, and one decimal). I also put a SPARK Style control above the form structure. 

The SPARK Style control will provide us with a place to put our CSS style. If you do not have access to or do not wish to use the SPARK Style control, you can still apply the style by putting it inside of a coach view that is a parent of the form or by putting it inside of a Custom HTML control with <style> tags.

Before we decide which fields we would like to make required, let’s take care of what we’d like a required field to look like. My UX team has decided that a red asterisk before the label of each required field is the best way to indicate to the user visually that the field is required. So, I will start by writing a CSS Class in a text editor.

In IBM BPM Coach Views, when you add a CSS class to a control, it applies it to the root element in that control which is a div. I need to get down to the label HTML element within any given input control. 

.required .control-label:before {

    content: "*";

    color: red;

So, this CSS selector reads as follows: “For all label elements that are descendants (inside of) elements that have the ‘required’ class, append an asterisk, and color that asterisk red.” 

Now that we have our rule written, save the file. I named mine “required.css” 

In Process Designer, add required.css to your application via the Files menu as a Web file. In your Style control, navigate to the configuration options and enter your required.css file, and select that it is a Web file.

The final step is to add the required class to each control that you would like to style as required. Click a control, then select “HTML Attributes”, then “Add Class” and enter “required”. Repeat this for each control you would like to be required.

Run your coach!

Extra notes

You can use :before OR :after, depending on where you want your asterisk. You can also insert other elements or spaces/text inside of the quotes of the “content” CSS rule. 

:: vs : for pseudo classes

You can use either double colons or single colons to denote a CSS pseudo-class. While all modern browsers will read both, IE 7 and 8 will only respond to single colons. So, for the best compatibility, it is a good rule of thumb to use the single colon.


  • Author: Rex Townsend
  • Date Created: May 24, 2016
  • Date Modified: March 29, 2017
Was this article helpful?
0 out of 0 found this helpful