dynamically change required atributte for html5 input control

Question

I have an input control which is a required field. However, I want to use javascript to dynamically change the required attribute so it can become NOT required. However, it doesn't work. Any idea how to make it work?

window.onload = function(){
    document.getElementById("website").setAttribute("required","false");
}

<input id="website" type="url" required>

Answer 1

required is a so called boolean attribute. It's mere existence on the element indicates that the input is required. It doesn't matter which value it has.

Remove the attribute if you want to make the input optional (same goes for all boolean attributes):

document.getElementById("website").removeAttribute("required");

Alternatively, access the DOM property and set it to false:

document.getElementById("website").required = false;

You should usually prefer dealing with properties than with attributes. It also makes the intentions clearer.

Answer 2

You probably need to use the removeAttribute() method.