Question & Answer > View Question

is there a way which i can set a field to mandatory using custom html?

Confluence User - 05 Nov, 2024

I was wondering if there is a way to set a field to "Mandatory" if the section is visible. This needs to be set before any submission occurs, so I think the only way is to use custom HTML.

The built-in visibility control for DX7 cannot be set because it does not support the relational operator(greater than or less than), so I managed to create a custom HTML to show the hide section. Because this was done via custom, if a submission was done without the section visible, it shows "Validation Error." If I remove this mandatory checkbox, then the submission was successful.

Below is my custom HTML code. "Section 9" is the section that shows hide; within this section there is a select box field, which I wish to set to mandatory if visible via vice versa.

<script>
    $(document).ready(function() {
        // Function to remove mandatory attribute from fields in a specific section
        function removeMandatory() {
            var section = $('#section9'); // Target the specific section

            // Find all input fields, selects, and textareas within the section
            section.find('input, select, textarea').each(function() {
                $(this).prop('required', false); // Remove the required attribute
                console.log("Removed mandatory requirement from: " + $(this).attr('name')); // Log the removal
            });
        }

        // Function to add mandatory attribute back to fields in a specific section
        function addMandatory() {
            var section = $('#section9'); // Target the specific section

            // Find all input fields, selects, and textareas within the section
            section.find('input, select, textarea').each(function() {
                $(this).prop('required', true); // Add the required attribute
                console.log("Added mandatory requirement to: " + $(this).attr('name')); // Log the addition
            });
        }

        // Function to check gtotalCur and toggle section visibility
        function checkSectionVisibility() {
            var gtotalCur = parseFloat($('input[name="gtotalCur"]').val().replace(/,/g, '')) || 0;
            if (gtotalCur >= 10000) {
                $('#section9').show(); // Show section9 if gtotalCur >= 10000
                addMandatory(); // Add mandatory attributes back
            } else {
                $('#section9').hide(); // Hide section9 if gtotalCur < 10000
                removeMandatory(); // Remove mandatory attributes
            }
        }

        // Initial check on page load
        checkSectionVisibility();

        // Listen for changes on gtotalCur input field
        $('input[name="gtotalCur"]').on('input change', function() {
            checkSectionVisibility();
        });
    });
</script>

Thank you in advance

forms;javascript

6

Confluence User •

06 Nov, 2024 •

confluenceUser •

1 •

confluenceUser •

Instead of toggling visibility of the section9, i suggest to move the content of section9 in a <template> element and leave section9 empty initially.

when gtotalCur >= 10000, clone the content of section9 from <template> tag into section9's <div> element

and when gtotalCur < 10000, remove the content of section9.

Example for js:

<script>
    $(document).ready(function() {

        var section = $('#section9');

        function removeMandatory() { 
            section.empty();
        }
 
        function addMandatory() {
            template = $("#myInputs").clone();
            section.append(template);
        }
 
        // remaining codes remains the same
    });
</script>

Example for html:

<template id="myInputs">
  	<input type="text">

    <select>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select>

    <textarea>
        Awesome, you did it!
    </textarea>
</template>

Confluence User •

07 Nov, 2024 •

confluenceUser •

•

confluenceUser •

Thank you for your reply.

do you have any example which i can study to understand?

Confluence User •

08 Nov, 2024 •

confluenceUser •

•

confluenceUser •

Hi.. just drop you with an example above, have a try!

Confluence User •

11 Nov, 2024 •

confluenceUser •

•

confluenceUser •

Hi.. thanks for your reply and example.. i have tired putting this into a single Custom HTML field but it seem like its not working. I'm i doing something wrong?

<script>
    $(document).ready(function() {
 
        var section = $('#section9');
 
        function removeMandatory() {
            section.empty();
        }
  
        function addMandatory() {
            template = $("#myInputs").clone();
            section.append(template);
        }
  
        // remaining codes remains the same
    
    
       // Function to check gtotalCur and toggle section visibility
        function checkSectionVisibility() {
            var gtotalCur = parseFloat($('input[name="gtotalCur"]').val().replace(/,/g, '')) || 0;
            if (gtotalCur >= 10000) {
                //$('#section9').show(); // Show section9 if gtotalCur >= 10000
                addMandatory(); // Add mandatory attributes back
            } else {
                //$('#section9').hide(); // Hide section9 if gtotalCur < 10000
                removeMandatory(); // Remove mandatory attributes
            }
        }
      // Initial check on page load
        checkSectionVisibility();

        // Listen for changes on gtotalCur input field
        $('input[name="gtotalCur"]').on('input change', function() {
            checkSectionVisibility();
        });
    });
</script>

<template id="myInputs">
    <input type="text">
 
    <select>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select>
 
    <textarea>
        Awesome, you did it!
    </textarea>
</template>

Confluence User •

12 Nov, 2024 •

confluenceUser •

•

confluenceUser •

Hi, i suppose a working sample is more beneficial for you.

Make sure do not set Validator for any inputs you have in Section9, just leave it empty.

Hope you like it: APP_sample-for-dx7.jwa

Confluence User •

13 Nov, 2024 •

confluenceUser •

•

confluenceUser •

Hi thank you for the sample. seem to be working now.

one more related question is it possible to convert this select box to a popup select box and the data is taken from the datalist?

1

CSV | Excel | XML | PDF

Your answer

Print

is there a way which i can set a field to mandatory using custom html?

6

RELATED QUESTIONS

Your answer

To answer a question you'll need an account.

6.builder-style-10d7d602-6132-419c-a579-606cace6e735{color:#008C60 !important;}

RELATED QUESTIONS

Your answer.builder-style-9da26e33-2697-4433-b130-6f7cc837bf8c{color:#008C60 !important; margin-left:10px !important;}

To answer a question you'll need an account.

6

Your answer