Set the "required" Attribute using JavaScript

avatar

Borislav Hadzhiev

Thu Dec 30 20212 min read

Set the "required" Attribute using JavaScript #

To set the required attribute, select the element and call the setAttribute() method, passing it required as the first parameter, e.g. input.setAttribute('required', ''). The setAttribute method will add the required attribute to the element.

Here is the HTML for the examples in this article.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <input type="text" id="first_name" /> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
const input = document.getElementById('first_name'); // ✅ Set required attribute input.setAttribute('required', ''); // ✅ Remove required attribute // input.removeAttribute('required');

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:

  1. name - the name of the attribute to be set.
  2. value- the value to assign to the attribute.
If the attribute already exists on the element, the value is updated, otherwise a new attribute is added with the specified name and value.

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 is not present, the value of the attribute is considered to be false.

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

index.js
const input = document.getElementById('first_name'); // ✅ Set required attribute input.setAttribute('required', ''); // ✅ Remove required attribute input.removeAttribute('required');

When setting the required attribute, we pass an empty string as the value for the attribute because it's a best practice to set boolean attributes without a value.

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

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
<!DOCTYPE html> <html lang="en"> <head> <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>

And here is the related JavaScript code.

index.js
const inputs = document.querySelectorAll('.field'); for (const input of inputs) { input.setAttribute('required', ''); }

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.

Use the search field on my Home Page to filter through my more than 1,000 articles.