I've added "required" to a HTML form input via javascript, but the input does not function as 'required' if changed after page load

Question

I have a HTML form with a selectable input - you can enter this or that. I've included code in my Javascript function that also applies the 'required' attribute to the one you've selected while making it visible - I can see the changes to the code via the Inspect Element tool, so I know that the code is functioning. In a similar manner, I'm removing the attributes and that is working.

  EmailInput.setAttribute("required","")
  EmailInput.setAttribute("aria-required","true")

However, in use, their function does not reflect their being required, and the form can proceed without them. If I designate for them to be required and to lose this parameter when you select the other, that does not change either so no changes are being made to the actual form from page load.

I've tried using input.checkValidity to remind the form of its new requirements, but that hasn't flown.

I'm using a Salesforce Cloudpage which may complicate things, but I want to ask here first in case I'm simply missing a beat.

I've tried checking the validity of the input, and using ReportValidity on the form level to refresh the requirement status of the inputs being displayed to the user, neither of which prompted any change.

I am not experiencing any errors relevant to the content.

Below I have provided the relevant elements for the smallest case of the form:

      function showUIDPrompt()
      {
        
        var UINumberInput = document.getElementById("UINumberInput");
        UINumberInput.value = ''
        UINumberInput.setAttribute("required","")
        UINumberInput.setAttribute("aria-required","true")
        UINumberInput.checkValidity()
        var UINumberDiv = document.getElementById("UINumber")
        UINumberDiv.style.display="block"
        
        var getForm = document.getElementById("sign-up-form")
        getForm.checkValidity()
      }

<form class="js-form" id="sign-up-form" action="%%=v(@urlThis)=%%" method="POST">
    <fieldset class="field-group">
      <fieldset>
     <ul class="field-list">

    <div>
    <!-- If they select the radio button, then the UIDnumber input should become visible and required. -->
       <input type="radio" id="nonEmployeeRadio" name="signup" value="false" onchange="showUIDPrompt()">
      <label>User ID</label>
    </div>  

    <!-- This should become display:block and required when the showUIDPrompt JS function runs -->
      <li class="field-list__item">
       <div class="field js-dependent-field" style="display:none" id="UINumber" >
        <label for="UIDNumber" class="label label--required">User ID</label>
        <input class="input" id="UINumberInput" name="UINumber" type="text" value="" placeholder="UINumber"  >
       </div>
      </li>

           </ul>
    </fieldset>
    <fieldset class="field-group field-group--actions">
     <button class="button sms-signup" data-sitekey="####" data-callback="onSubmit" data-action="submit"> Sign Up </button>
    </fieldset>
   </fieldset></form>