Set/Remove the "required" Attribute using JavaScript

# Table of Contents

# Set the "required" Attribute using JavaScript

To set the required attribute:

Select the element.
Use the setAttribute() method to set the required attribute.
The setAttribute method will add the required attribute to the element.

Here is the HTML for the examples.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>bobbyhadz.com</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <input type="text" id="first_name" />

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const input = document.getElementById('first_name');

// ✅ Set required attribute
input.setAttribute('required', '');

// ✅ Remove required attribute
// input.removeAttribute('required');

set attribute required

The code for this article is available on GitHub

We selected the input field using the document.getElementById() method.

We then used the setAttribute() method to add the required attribute to the input.

The method takes the following 2 parameters:

name - the name of the attribute to be set.
value- the value to assign to the attribute.

If the attribute already exists on the element, its value is updated, otherwise, a new attribute with the specified name and value is added to the element.

It's a best practice to set boolean attributes, such as required, to an empty string.

If the attribute is present at all, regardless of the value, its value is considered to be true.

If a boolean attribute is not present, the value of the attribute is considered to be false.

If you need to remove an attribute, use the removeAttribute() method.

index.js

Copied!
const input = document.getElementById('first_name');

// ✅ Set required attribute
input.setAttribute('required', '');

// ✅ Remove required attribute
input.removeAttribute('required');

The required attribute can be set to any value and as long as it is present on the element, it does the job.

# Setting the "required" attribute on multiple elements

Note that you can only call the setAttribute() method on DOM elements. If you need to set the required attribute on a collection of elements, you have to iterate over the collection and call the method on each individual element.

Here is the HTML for the next example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>bobbyhadz.com</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <input type="text" id="first_name" class="field" />
    <input type="text" id="last_name" class="field" />
    <input type="text" id="country" class="field" />

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const inputs = document.querySelectorAll('.field');

for (const input of inputs) {
  input.setAttribute('required', '');
}

set required attribute on collection of elements

The code for this article is available on GitHub

We used the document.querySelectorAll() method to select all elements with a class of field.

We used the for...of loop to iterate over the collection and set the required attribute on each element.

# Remove the "required" Attribute using JavaScript

To remove the required attribute, select the element and call the removeAttribute() method on it, passing it required as a parameter.

The removeAttribute method will remove the required attribute from the element.

Here is the HTML for the examples.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>bobbyhadz.com</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <input type="text" id="first_name" required />

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const input = document.getElementById('first_name');

// ✅ Remove the required attribute
input.removeAttribute('required');

// ✅ Set the required attribute
// input.setAttribute('required', '');

The code for this article is available on GitHub

We selected the input element using the document.getElementById() method.

We then used the removeAttribute() method to remove the required attribute from the element.

The method takes the attribute to remove as a parameter.

If the attribute does not exist on the element, the removeAttribute() method does not throw an error, it ignores the call.

When setting the value of a boolean attribute, such as required, we can specify any value for the attribute and it will work.

If the attribute is present at all, regardless of the value, its value is considered to be true.

If a boolean attribute, such as required, is not present, the value of the attribute is considered to be false.

If you need to add an attribute, you can use the setAttribute method.

index.js

Copied!
const input = document.getElementById('first_name');

// ✅ Remove required attribute
input.removeAttribute('required');

// ✅ Set required attribute
input.setAttribute('required', '');

The method takes the attribute name as the first parameter and the value that should be assigned to the attribute as the second.

When setting boolean attributes, such as required, it's a best practice to set them to an empty value. That's why we passed an empty string as the value in the example.

The required attribute can be set to any value and as long as it is present on the element, it does the job.

# Removing the "required" attribute from multiple elements

Note that you should only call the removeAttribute() method on DOM elements.

If you need to remove the required attribute from a collection of elements, you have to iterate over the collection and call the method on each individual element.

Here is the HTML for the next example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>bobbyhadz.com</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <input type="text" id="first_name" class="field" required />
    <input type="text" id="last_name" class="field" required />
    <input type="text" id="country" class="field" required />

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const inputs = document.querySelectorAll('.field');

for (const input of inputs) {
  // ✅ Remove required attribute
  input.removeAttribute('required');
}

The code for this article is available on GitHub

We used the document.querySelectorAll() method to select all elements with a class of field.

We used the for...of loop to iterate over the collection and remove the required attribute from each element.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Set/Remove the "required" Attribute using JavaScript

# Table of Contents

# Set the "required" Attribute using JavaScript

# Setting the "required" attribute on multiple elements

# Remove the "required" Attribute using JavaScript

# Removing the "required" attribute from multiple elements

# Additional Resources

Borislav Hadzhiev