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 bee 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>

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 bee 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>

• javascript
• html

• possible duplicate of Bypass HTML "required" attribute when submitting – AeroX Commented Sep 2, 2014 at 16:41

3 Answers 3

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.

You probably need to use the removeAttribute() method.

This problem is similar to another involving the "hidden" attribute. And for wider patibility, 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