Make fields required based on button selection

Forms Public Forms
1

I need some guidance on how to make certain fields required based on a selected radio button.

Scenario:
In this form, I have three radio buttons that when selected it will show fields related to that selection. I need these fields to be required based on the radio button selection. I have included screenshots of form design with properties.

Hope this makes sense. Thanks for your help and guidance.

Capture1
Capture1.JPG1732×778 117 KB

2

I found a posting on the Plumsail forms section about form validation but as a novice scripter, I am missing something. Attached is how I interpreted the information from the posing but it is not working for me. I wanted to at least try an attempt to resolve this myself. validate-button-selection.txt (2.1 KB)

3

Hello @gwmyers,

You can add custom Form validator to your form to require fields based on condition. Please find the example here.

In your case, you need to change validators dynamically. Please see the code sample below.

fd.rendered(function() {    
    fd.field('FieldInternalName').$on('change', function(value){

        //clear validatior
        fd.validators.length = 0;
        //require field if Item 1 selected
        if(value == 'Item 1') {
                fd.validators.push({
                        name: 'Name',
                        error: "Error text",
                        validate: function() {
                            if(!fd.field('TextBox1').value){
                                            return false;
                                    }
                            return true;
                        }
                });
        }
         //require field if Item 2 selected
        if(value == 'Item 2') {
                fd.validators.push({
                        name: 'Name',
                        error: "Error text",
                        validate: function() {
                            if(!fd.field('TextBox2').value){
                                            return false;
                                    }
                            return true;
                        }
                });
        }
                
    });
});
4

Wow...thank you. I wasn't even close with my attempt. I will give this a try.

1 Like
5

Hi there,
I am running into a minor issue where the error does not show up if the choice text box is not completed. The area is validated and does not allow submission unless completed but I wanted an error to show up letting the user know the field is required. I am missing something.
Here is a link to my test form - https://forms.plumsail.com/preview/b3d7ae6e-b546-462c-af93-8dd8a46a044e

Attached is my code.code-form-validate.txt (2.0 KB)

Thanks for your assistance.

6

Hello @gwmyers,

Your form has the following error in the console:

image
image738×175 6.37 KB

You clear the values on form load, that triggers the change event of the single choice field and as it is blank, the code breaks. You need to add a condition to check if the value is present:

    var radio = fd.field('rbChoice');

//show or hide grid containers when selecting values

    radio.$on('change', function(value) {
//checks if the single choice field has value
if(value) {
        if(radio.value.includes('Choice 1') == true) {
            //show chg-cost-center grid container
            $('.Box1').show();
            $('.Box2').hide();

            }   
        
        if(radio.value.includes('Choice 2') == true) {
            //show chg-cost-center grid container
            $('.Box2').show();
            $('.Box1').hide();

            }  
      }                 
    });