JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <input id="edName" type="text" required>
    <br/>
    <input type="submit" value="Search">
</form>
<p>
<button onclick="SetRequired(true)">Set required</button>
<button onclick="SetRequired(false)">Set not required</button><br>
<span id="lblRequired"></span>

JavaScript

function SetRequired(isRequired) {
    var edName = document.getElementById("edName");
    if (edName === null) return;

    if (isRequired) 
    {
        //recommended W3C HTML5 syntax for boolean attributes
        //edName.attributes["required"] = ""; 
        
        //alternative W3C HTML5 syntax for boolean attributes (xhtml compatible)
        edName.attributes["required"] = "required"; 
    }
    else 
    {
        //edName.removeAttribute("required"); //doesn't actually work 
        edName.attributes["required"] = null;
    }

    UpdateRequiredLabel();
}

function UpdateRequiredLabel() {
    var lblRequired = document.getElementById("lblRequired");
    if (lblRequired === null) return;

    var edName = document.getElementById("edName");
    if (edName === null) {
        lblRequired.innerText = "(could not find edName input box)";
        return;
    }

    //any value of a boolean attribute is true
    var isRequired = (edName.attributes["required"] != null); 

    if (isRequired) 
    {
        lblRequired.innerText = "Required (required = \"" + edName.attributes.required + "\")";
    }
    else 
        lblRequired.innerText = "Optional";
}

UpdateRequiredLabel();