Page tree
Skip to end of metadata
Go to start of metadata

This is the documentation for ConfiForms Server/Data Center 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><![CDATA[<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>