Login

Login

Logic

CML allows simple logic statements to attach the visibility of one or more form elements to the value of other fields via the only-if attribute. only-if logic is run when the fields that a given field depends on are validated (on element blur and form submit).

Basic only-if selectors

The easiest way to use an only-if is to specify a different field’s name attribute:

<cml:text label="Enter an integer" validates="required integer" />
<cml:text label="Describe the integer" only-if="enter_an_integer" validates="required" />

In this example, the “Describe the integer” field will display only if the “Enter an integer” field passes all of its validators (required and integer).

Overriding validators

You can override a field’s validators by using the following format: only-if="field_name:validatorName". Example:

<cml:text label="Enter an integer" validates="required integer" />
<cml:text label="Why did you enter letters?" only-if="enter_an_integer:alpha" validates="required" />

In this case, the “Why did you enter letters?” field will display only when the “Enter an integer” field passes the alpha validator.

Indexed only-if selectors

One of the most common uses of only-if is to make the display of a field dependent on the checked status of a specific radio button or checkbox or the selectedIndex value of a select. You can do so using this format: only-if="field_name:[index_number]" where “index_number” is a valid index integer.

<cml:select label="Pick a number">
  <cml:option>One</cml:option>
  <cml:option>Two</cml:option>
</cml:select>
<cml:text label="Why did you pick the first one?" only-if="pick_a_number:[0]" validates="required" />

The above CML will require and display the “Why did you pick the first one?” text field only when the first option is selected in the “Pick a number” drop-down menu. The index value is 0-based. (i.e. The first element is “0”, the second is “1”, and so on.) Additionally, the “Why did you pick the first one?” field will be validated only when it is visible. Hidden fields do not run their validators on form submit.

You can also use the input’s value instead of an index number:

<cml:checkboxes label="Symptoms">
  <cml:checkbox value="breath" label="Shortness of breath" />
  <cml:checkbox value="hair" label="Hair loss" />
</cml:checkboxes>
<cml:text label="Your hair is falling out?" only-if="symptoms:[hair]" validates="required" />

“Or”

“Or” logic can be used in indexed only-if selectors. Use the pipe character ”|” to specify an “or” relationship between values:

<cml:select label="Pick a number">
  <cml:option value="uno">One</cml:option>
  <cml:option value="dos">Two</cml:option>
  <cml:option value="tres">Three</cml:option>
  <cml:option value="quattro">Four</cml:option>
</cml:select>
<cml:text label="Why did you pick an odd number?" only-if="pick_a_number:[0|tres]" validates="required" />

As shown above, you can mix index and value indices if desired.

Complex only-if selectors

CML only-if logic supports the following operators:

Operator Meaning Associates
++ and Left-to-right
|| or Left-to-right
! not Right-to-left

For example:

<cml:checkbox label="x" value="ex" />
<cml:checkbox label="y" value="why" />
<cml:checkbox label="z" value="zee" />
<cml:text label="One of them is on." only-if="x||y||z" />
<cml:text label="All on!" only-if="x++y++z" />
<cml:text label="So fancy." only-if="(x:[ex]||z)++(y:[0]||z)" />
<cml:text label="'ex' isn't selected." only-if="!x" />

CML Docs