5

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>
Vini.g.fer
  • 11,639
  • 16
  • 61
  • 90
nullox
  • 295
  • 2
  • 7
  • 18
  • possible duplicate of [Bypass HTML "required" attribute when submitting](http://stackoverflow.com/questions/18725078/bypass-html-required-attribute-when-submitting) – AeroX Sep 02 '14 at 16:41

3 Answers3

6

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.

Community
  • 1
  • 1
Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
  • I am using JQuery in my project and using `$('#name').removeAttr('required')` do not work for me, neither does `$('#name').required = false`. However doing `$('#name')[0].required = false` works. Can you please explain this behaviour ? – M. Habib Jul 10 '18 at 06:51
  • Not sure about the first one (but I know that jQuery was weird about `removeAttr` in the past). The second one doesn't work because a jQuery object [doesn't have a `required` property](https://api.jquery.com/?s=required). You are just assigning a new arbitrary property to the jQuery object. The last one works because you are accessing DOM element "inside" the jQuery object, i.e. it is the same as my second suggestion. – Felix Kling Jul 10 '18 at 06:55
  • Ok, any suggestions if i want to avoid using `[0]` to specify DOM element in jQuery ? I am asking this because it seems quite a bit hacky way of doing stuff.. – M. Habib Jul 10 '18 at 07:26
  • 1
    To set DOM *properties* with jQuery you can use `.prop`: `$('#name').prop('required', false)` http://api.jquery.com/prop/#prop2 – Felix Kling Jul 10 '18 at 15:18
  • Thanks for this elegant method. – M. Habib Jul 11 '18 at 05:50
3

You probably need to use the removeAttribute() method.

double-beep
  • 5,031
  • 17
  • 33
  • 41
netdog
  • 91
  • 3
0

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
vernonner3voltazim
  • 780
  • 6
  • 5
  • Setting the *property* to `false` certainly works. Try http://jsfiddle.net/zpLt4rye/ in a browser that supports `required`. – Felix Kling Sep 02 '14 at 16:54
  • Then perhaps the real problem of the original question-asker is the difference between "false" (string) and false (boolean). The string is of course not actually equal to the boolean false. – vernonner3voltazim Sep 02 '14 at 17:16