Required fields Validation - either one field must not empty - Kentico Form

Today I would like to share how to implement the required field validation for 2 fields - either one field must not empty. Normally when we using Kentico Form(BizFrom, custom table, page type), we want to make the field is mandatory, so we just need to tick on the required checkbox to make it required. So come to the next scenario, we might need to make sure from 2 fields either one must have a value. Here is how to implement this validation on the Kentico Xperience CMS. 

Step 1

Make sure the 2 fields are not required fields by unticking the required checkbox at the Fields configuration. 
Capture-4.PNG
 

Step 2 - create your own Macro Rule; Form Validation.

Navigate to Macro Rule Module in Kentico.

Capture-5.PNG

Click on the Form Validation tab and click on the New macro rule button. 
Enter the below details to create a new macro rule. 
  1. Display Name: 2 Fields Cannot Empty
  2. Description: This condition to check 2 fields must not empty
  3. User text: Value == (!{Field1} || !{Field2})
  4. Condition: !String.IsNullOrWhiteSpace(Fields["{Field1}"].Value) || !String.IsNullOrWhiteSpace(Fields["{Field2}"].Value)
  5. Requires context: True
  6. Click on the Save button.
Now click on the Parameters Tab. 
You should be able to see 2 fields already created for you.(field1 & field2)

Capture-6.PNG

Now configure the field with the below configuration. 
  1. Form control: Drop-down list
  2. Data source: Macro expression
    • UIContext["CurrentFormFields"]#
  3. Click the Save button.
  4. Repeat steps 1-3 for field2.
Capture-7.PNG

Now the Custom Macro Rule created. Go back to your Form Fields Setting. 
 

Step 3

Create a new field without database representation in your form. Configure the field as per the below configuration. 
  1. Field Name: ProductChecker
  2. Data type: Boolean
  3. Required: Yes
  4. Field caption: Product Checker
  5. Form Control: Checkbox
  6. Validation Rules:-
    • Validation Rule: 2 Fields Cannot Empty
    • Enter text: Product1(field1 you want to check for not empty)
    • Enter text: Product2(field2 you want to check for not empty)
    • Error Message: Please choose the product you are interested
    • Click on the Apply button
    • Click on the Save button
  7. Now click on the Layout  Tab
  8. You may insert the Product Checker input field & validation in the custom layout.Example as below:

<div class="col-md-12">
<div class="form-group">
<hr />
<div class="spacer30">&nbsp;</div>
<h5>Product Interested</h5> $$validation:ProductChecker$$</div> </div>
<div class="col-md-6">
<div class="form-group checkboxfield">$$input:Product2$$ $$validation:Product2$$</div> </div>
<div class="col-md-6">
<div class="form-group checkboxfield">$$input:Product1$$ $$validation:Product1$$
<div style="display:none">$$input:ProductChecker$$</div>
</div>
</div>


Done.

Result

Capture-8.PNG
 

 

 

 Back to listing