Modifying 'required' attribute with Javascript (Embedded Forms)

Hi Team,

Good day, I am reaching out with a query related to setting/removing the ‘required’ attribute from an HTML element using JavaScript on embedded forms.

Use Case: In my embedded form I have a ‘select’ dropdown which provides several 'option’s wherein based on the selection (onchange event) the user made will set/remove the ‘required’ attribute of an HTML component.

Here’s my javascript code:

<script type="text/javascript">

function setRequired(){

        const narrative = document.querySelector('#addtl_reason');
        const decision = document.querySelector('#decision');

        if (decision.selectedIndex == 1){

            // narrative.setAttribute("required", "true");
            // narrative.setAttribute("required", " ");
            narrative.setAttribute("required", true);
            // narrative.required = true;

            // assign to var req for alert confirmation
            var req = narrative.getAttribute("required");

            // reflect the value of the selected opt in select
            alert("The select opt from select is: " + decision.value);

            // check if the 'required' attribute has been set, should return 'true'
            alert("Does the element have the required attribute? " + narrative.hasAttribute("required"));

            // display value of 'required' attribute
            alert("the value of the required field: " + req);
            
        }
        else {

            narrative.removeAttribute("required");
            var req = narrative.getAttribute("required");
            alert(req);
        }
    }

</script>

In my script, I’ve added alert() functions just in order for me to confirm that my script is working and that the ‘required’ attribute is being set/removed. Here are my results:

When opt 1 is selected (this is selectIndex==1):
image
image
image

based on the above output I can conclude that the script is working and reflects the changes however I’ve noticed that even if the ‘required’ attrib is set, Camunda still allows me to proceed with the form submission, which based on Camunda’s default behavior should not be allowed until all required fields are filled up.

Can anybody help me identify what could possibly be wrong here? OR is this not possible to do within Camunda?

Thanks!

here’s btw the code snippet for the #addtl_reason

        <div id = "narrative" class="form-group col-md-6">
                <label class="control-label col-md-5" for="addtl_reason">STR Narrative</label>
                    <div class="col-md-7">
                        <textarea cam-variable-name="addtl_reason"
                                  cam-variable-type="String"
                                  id="addtl_reason"
                                  name="addtl_reason"
                                  class="form-control glow"
                                  maxlength="4000"
                                  rows="5"
                                  aria-describedby="notesHelpBlock"
                                  placeholder="Write your case narrative here..."
                                  onkeyup="cnt_reason_character()"></textarea>
                          
                <small id="notesHelpBlock" class="form-text pull-right text-muted"> <span id="words_count" class="d-none form-text text-muted"> <span id="reason_textcount">0</span> / 4000</span></small>
                <small id="notesHelpBlock" class="form-text text-muted">Provide your case narrative here.</small>
                    </div>
        </div>