Conditional validation for required field

This is the documentation for ConfiForms Server/Data Center app

However, this might also work for ConfiForms cloud and in most cases it does. But please see this page to understand the differences between server and cloud versions of the ConfiForms app.

With ConfiForms Field Definition Rules it is easy to configure your form to validate the fields to require values, conditionally.

Configuration

You can easily set up the Field Definition to be required via macro parameters

But what if you need the field to have a value only when some other field is set?

Consider a simple form with just 2 fields: checkbox field and text field we want to make "required" when a checkbox field is checked

Confluence editor "view" of the form's configuration

Now we add a ConfiForms Field Definition rules macro and set it up to require a value for "myfield" when "makeRequired" field is checked

The condition here is set as follows

makeRequired:true AND myfield:[empty]

The remaining bits of the configuration for the Field Definition Rule are as follows

So, we set the validation rule to run when the condition is met and show the message we have configured

When we try to submit the form with empty value for the "myfield" when "makeRequired" field is checked we get the following response

Complete storage format for the demo

<ac:structured-macro ac:macro-id="564ab3d6-7c49-45c5-9e17-74c492fc1828" ac:name="confiform" ac:schema-version="1">
  <ac:parameter ac:name="formName">myform</ac:parameter>
  <ac:rich-text-body>
    <ac:structured-macro ac:macro-id="62cbf463-6860-4769-a16b-9dcc086910b3" ac:name="confiform-entry-register" ac:schema-version="1">
      <ac:parameter ac:name="embedded">true</ac:parameter>
      <ac:parameter ac:name="atlassian-macro-output-type">INLINE</ac:parameter>
      <ac:rich-text-body>
        <p>
          <br/>
        </p>
      </ac:rich-text-body>
    </ac:structured-macro>
    <p>
      <ac:structured-macro ac:macro-id="8c774cc4-b415-47eb-bb28-8cd31891f4ba" ac:name="confiform-field-definition" ac:schema-version="1">
        <ac:parameter ac:name="fieldName">makeRequired</ac:parameter>
        <ac:parameter ac:name="fieldLabel">Make required</ac:parameter>
        <ac:parameter ac:name="type">checkbox</ac:parameter>
      </ac:structured-macro>
    </p>
    <p>
      <ac:structured-macro ac:macro-id="a1c484ce-abea-4ef8-a70f-41f718bd7337" ac:name="confiform-field-definition" ac:schema-version="1">
        <ac:parameter ac:name="fieldName">myfield</ac:parameter>
        <ac:parameter ac:name="fieldLabel">myfield</ac:parameter>
        <ac:parameter ac:name="type">text</ac:parameter>
      </ac:structured-macro>
    </p>
    <p>
      <br/>
    </p>
    <ac:structured-macro ac:macro-id="c95709e3-984a-407f-b346-780d806f0542" ac:name="confiform-field-definition-rules" ac:schema-version="1">
      <ac:parameter ac:name="condition">makeRequired:true AND myfield:[empty]</ac:parameter>
      <ac:parameter ac:name="fieldName">myfield requires a value to be set when "makeRequired" field is checked</ac:parameter>
      <ac:parameter ac:name="action">Validation rule</ac:parameter>
    </ac:structured-macro>
    <p>
      <br/>
    </p>
  </ac:rich-text-body>
</ac:structured-macro>

Extra step (optional)

We can extend this demo to have a "required asterisk" visible when the field is set to be required

Here is how.

ConfiForms has the required label rendered by adding the following "span" HTML element

<span style="color:red;font-weight: bolder;float: right;font-size: larger;">* </span>

We can set up couple of rules to add/remove this element via JavaScript

Script is quite simple

<script type="text/javascript">
  function makeRequired(formName, formId){ 
    var myFieldLabel = AJS.$('#' + formId).find('#i_labelfor_myfield'); 
    AJS.$(myFieldLabel).find('span').remove(); 
    AJS.$(myFieldLabel).append('<span style="color:red;font-weight: bolder;float: right;font-size: larger;">* </span>'); 
  }
 
  function removeRequired(formName, formId){ 
    var myFieldLabel = AJS.$('#' + formId).find('#i_labelfor_myfield'); 
    AJS.$(myFieldLabel).find('span').remove(); 
  } 
</script>

And you invoke it via ConfiForms Field Definition Rule called "Run custom JavaScript"

Here is a complete storage format for this configuration

<ac:structured-macro ac:macro-id="564ab3d6-7c49-45c5-9e17-74c492fc1828" ac:name="confiform" ac:schema-version="1">
<ac:parameter ac:name="formName">myform</ac:parameter>
<ac:rich-text-body>
<ac:structured-macro ac:macro-id="62cbf463-6860-4769-a16b-9dcc086910b3" ac:name="confiform-entry-register" ac:schema-version="1">
<ac:parameter ac:name="embedded">true</ac:parameter>
<ac:parameter ac:name="atlassian-macro-output-type">INLINE</ac:parameter>
<ac:rich-text-body>
<p>
<br/>
</p>
</ac:rich-text-body>
</ac:structured-macro>
<p>
<ac:structured-macro ac:macro-id="8c774cc4-b415-47eb-bb28-8cd31891f4ba" ac:name="confiform-field-definition" ac:schema-version="1">
<ac:parameter ac:name="fieldName">makeRequired</ac:parameter>
<ac:parameter ac:name="fieldLabel">Make required</ac:parameter>
<ac:parameter ac:name="type">checkbox</ac:parameter>
</ac:structured-macro>
</p>
<p>
<ac:structured-macro ac:macro-id="ed13465f-eeaa-45ea-a26d-30985d6bdd93" ac:name="confiform-field-definition" ac:schema-version="1">
<ac:parameter ac:name="fieldName">myfield</ac:parameter>
<ac:parameter ac:name="fieldLabel">myfield</ac:parameter>
<ac:parameter ac:name="type">text</ac:parameter>
</ac:structured-macro>
</p>
<p>
<br/>
</p>
<ac:structured-macro ac:macro-id="c95709e3-984a-407f-b346-780d806f0542" ac:name="confiform-field-definition-rules" ac:schema-version="1">
<ac:parameter ac:name="condition">makeRequired:true AND myfield:[empty]</ac:parameter>
<ac:parameter ac:name="fieldName">myfield requires a value to be set when "makeRequired" field is checked</ac:parameter>
<ac:parameter ac:name="action">Validation rule</ac:parameter>
</ac:structured-macro>
<p>
<ac:structured-macro ac:macro-id="cef33c61-81fd-4f4c-976c-390ff31f1a9f" ac:name="confiform-field-definition-rules" ac:schema-version="1">
<ac:parameter ac:name="condition">makeRequired:true</ac:parameter>
<ac:parameter ac:name="values">makeRequired(formName, formId);</ac:parameter>
<ac:parameter ac:name="action">Run custom JavaScript</ac:parameter>
<ac:parameter ac:name="actionFieldName">makeRequired</ac:parameter>
</ac:structured-macro>
</p>
<p>
<ac:structured-macro ac:macro-id="2fbf9094-c766-43c5-bd7e-2d7ce9be0c14" ac:name="confiform-field-definition-rules" ac:schema-version="1">
<ac:parameter ac:name="condition">makeRequired:false</ac:parameter>
<ac:parameter ac:name="values">removeRequired(formName, formId);</ac:parameter>
<ac:parameter ac:name="action">Run custom JavaScript</ac:parameter>
<ac:parameter ac:name="actionFieldName">makeRequired</ac:parameter>
</ac:structured-macro>
</p>
</ac:rich-text-body>
</ac:structured-macro>
<ac:structured-macro ac:macro-id="c478a814-3778-4afd-9071-d0b47d254eea" ac:name="html" ac:schema-version="1">
<ac:plain-text-body><script>
function makeRequired(formName, formId){
var myFieldLabel = AJS.$('#' + formId).find('#i_labelfor_myfield');
AJS.$(myFieldLabel).find('span').remove();
AJS.$(myFieldLabel).append('<span style="color:red;font-weight: bolder;float: right;font-size: larger;">* </span>');
}
function removeRequired(formName, formId){ 
var myFieldLabel = AJS.$('#' + formId).find('#i_labelfor_myfield'); 
AJS.$(myFieldLabel).find('span').remove(); 
}
</script>></ac:plain-text-body>
</ac:structured-macro>

Update: There are some built-in helper functions that you can use now ConfiForms Field Definition Rules#RuncustomJavaScript

And the cfAddFieldRequired being as the most appropriate here, so you dont need to write yo own function

Complete configuration

<ac:structured-macro ac:macro-id="564ab3d6-7c49-45c5-9e17-74c492fc1828" ac:name="confiform" ac:schema-version="1">
  <ac:parameter ac:name="formName">myform</ac:parameter>
  <ac:rich-text-body>
    <ac:structured-macro ac:macro-id="62cbf463-6860-4769-a16b-9dcc086910b3" ac:name="confiform-entry-register" ac:schema-version="1">
      <ac:parameter ac:name="embedded">true</ac:parameter>
      <ac:parameter ac:name="atlassian-macro-output-type">INLINE</ac:parameter>
      <ac:rich-text-body>
        <p>
          <br/>
        </p>
      </ac:rich-text-body>
    </ac:structured-macro>
    <p>
      <ac:structured-macro ac:macro-id="8c774cc4-b415-47eb-bb28-8cd31891f4ba" ac:name="confiform-field-definition" ac:schema-version="1">
        <ac:parameter ac:name="fieldName">makeRequired</ac:parameter>
        <ac:parameter ac:name="fieldLabel">Make required</ac:parameter>
        <ac:parameter ac:name="type">checkbox</ac:parameter>
      </ac:structured-macro>
    </p>
    <p>
      <ac:structured-macro ac:macro-id="a1c484ce-abea-4ef8-a70f-41f718bd7337" ac:name="confiform-field-definition" ac:schema-version="1">
        <ac:parameter ac:name="fieldName">myfield</ac:parameter>
        <ac:parameter ac:name="fieldLabel">myfield</ac:parameter>
        <ac:parameter ac:name="type">text</ac:parameter>
      </ac:structured-macro>
    </p>
    <p>
      <br/>
    </p>
    <ac:structured-macro ac:macro-id="c95709e3-984a-407f-b346-780d806f0542" ac:name="confiform-field-definition-rules" ac:schema-version="1">
      <ac:parameter ac:name="condition">makeRequired:true AND myfield:[empty]</ac:parameter>
      <ac:parameter ac:name="fieldName">myfield requires a value to be set when "makeRequired" field is checked</ac:parameter>
      <ac:parameter ac:name="action">Validation rule</ac:parameter>
    </ac:structured-macro>
    <p>
      <ac:structured-macro ac:macro-id="d3470974-961a-4416-953f-9354711bd815" ac:name="confiform-field-definition-rules" ac:schema-version="1">
        <ac:parameter ac:name="condition">makeRequired:true AND myfield:[empty]</ac:parameter>
        <ac:parameter ac:name="values">cfAddFieldRequired(formId, 'myfield')</ac:parameter>
        <ac:parameter ac:name="action">Run custom JavaScript</ac:parameter>
        <ac:parameter ac:name="actionFieldName">makeRequired,myfield</ac:parameter>
      </ac:structured-macro>
    </p>
    <p>
      <ac:structured-macro ac:macro-id="12810cd7-1158-479a-a6cc-abf3a3653d94" ac:name="confiform-field-definition-rules" ac:schema-version="1">
        <ac:parameter ac:name="condition">makeRequired:false OR !myfield:[empty] OR (makeRequired:false AND myfield:[empty])</ac:parameter>
        <ac:parameter ac:name="values">cfRemoveFieldRequired(formId, 'myfield')</ac:parameter>
        <ac:parameter ac:name="action">Run custom JavaScript</ac:parameter>
        <ac:parameter ac:name="actionFieldName">makeRequired,myfield</ac:parameter>
      </ac:structured-macro>
    </p>
    <p>
      <br/>
    </p>
  </ac:rich-text-body>
</ac:structured-macro>

Page tree

Conditional validation for required field

Configuration

Complete storage format for the demo

Extra step (optional)