Skip to main content

How to Set and Remove the required Attribute in JavaScript

The required attribute is a boolean attribute that enforces a form field to be filled out before the form can be submitted. Programmatically setting and removing this attribute is a common task for creating dynamic and conditional forms.

This guide will demonstrate the modern and recommended best practice for managing the required state by setting the element's DOM property. We will also cover the older setAttribute/removeAttribute methods for context.

The Core Concept: Boolean Attributes vs. DOM Properties​

The required attribute in HTML is a boolean attribute. This means its presence on an element makes it true, and its absence makes it false. The value of the attribute (e.g., required="") is irrelevant.

Because of this, modern JavaScript provides a direct DOM property (in this case, .required) that correctly translates this presence or absence into a clean true or false boolean for you to use. Manipulating this property is the cleanest and most direct way to manage the state.

The best practice for making an element required is to set its .required property to true. JavaScript will automatically add the required attribute to the HTML element.

Problem: you have an input field that you need to make mandatory based on some logic.

<input type="text" id="my-input">

Solution:

// 1. Select the element.
const myInput = document.getElementById('my-input');

// 2. Set the .required property to true.
myInput.required = true;

After this code runs, the element in the DOM will be updated to:

<input type="text" id="my-input" required>
note

The browser will now enforce the requirement for this field.

To make a field optional again, simply set its .required property to false. JavaScript will automatically remove the required attribute from the element.

const myInput = document.getElementById('my-input');

// Set the .required property to false.
myInput.required = false;
note

After this code runs, the required attribute will be gone from the HTML element.

The Classic Method: setAttribute and removeAttribute​

Before the direct property access was widely used, the standard was to use setAttribute() and removeAttribute(). These methods still work perfectly but are slightly more verbose.

const myInput = document.getElementById('my-input');

// To set the required attribute:
// The second argument can be an empty string for boolean attributes.
myInput.setAttribute('required', '');

// To remove the required attribute:
myInput.removeAttribute('required');
note

While this is a valid approach, setting the .required boolean property is more idiomatic and often clearer in modern JavaScript.

Practical Example: A Conditionally Required Field​

This is a very common use case. A checkbox that, when checked, makes another input field required.

HTML:

<label>
  <input type="checkbox" id="subscribe-checkbox">
  Subscribe to our newsletter?
</label>
<br>
<label>
  Email Address:
  <input type="email" id="email-input">
</label>

JavaScript:

const subscribeCheckbox = document.getElementById('subscribe-checkbox');
const emailInput = document.getElementById('email-input');

subscribeCheckbox.addEventListener('change', () => {
  // The .required property will be true if the checkbox is checked, and false if not.
  emailInput.required = subscribeCheckbox.checked;
  
  if (emailInput.required) {
    console.log('Email is now required.');
  } else {
    console.log('Email is now optional.');
  }
});
note

This script elegantly ties the required state of the email input to the checked state of the checkbox.

Conclusion​

Managing the required attribute in JavaScript is a simple task with a clear best practice.

  • The recommended best practice is to manipulate the element's boolean DOM property directly:
    • myElement.required = true; to set the attribute.
    • myElement.required = false; to remove the attribute.
  • This approach is cleaner and more direct than using the older setAttribute() and removeAttribute() methods.
  • This same principle applies to other boolean attributes like disabled, checked, and readOnly.

Table of Contents