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

 
1
0
-1

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

    CommentAdd your comment...

    1 answer

    1.  
      1
      0
      -1

      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>


      1. hironori hasegawa

        Thank you for your reply.

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

      2. wakjoko

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

      3. hironori hasegawa

        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>


      4. wakjoko

        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

      5. hironori hasegawa

        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?

      CommentAdd your comment...