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

Answer 1

This problem is similar to another involving the "hidden" attribute. And for wider compatibility, consider the XHTML form of using the attribute, instead of the HTML form:

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

(The similarity to 'hidden' is that the attribute is specified as hidden="hidden")

Anyway, when trying to change the value of the hidden attribute in JavaScript, setting it to "false" doesn't work. However, setting it to an empty string does, so that is what you might try for 'required':

 document.getElementById("website").required="";
 document.getElementById("website").required="required"; //when required wanted

Answer 2

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 3

You probably need to use the removeAttribute() method.