# Bad value X for attribute “required” on element “Y”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-x-for-attribute-required-on-element-y
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

`required` is a boolean attribute, so on `<input>`, `<select>` and `<textarea>` you write it bare, empty or as `required="required"`, and a value like `"true"` or `"false"` is an error.

The HTML standard allows two values for a boolean attribute: the empty string and the attribute's own name, in any letter case. So `required`, `required=""`, `required="required"` and `required="REQUIRED"` all pass. The validator reports any other value with this message and quotes what it found: `"true"`, `"false"`, `"1"`, `"yes"`, and also `"required "` with a trailing space.

Browsers don't read the value at all. If the attribute is there, the field is mandatory, so `required="false"` blocks the form just like `required="true"` does. To make a field optional, remove the attribute.

The bad value usually comes from a form builder or template that writes a boolean setting straight into the markup, often with `aria-required="true"` next to it. Once you fix `required`, the validator warns that `aria-required` is unnecessary on an element that has `required`, so remove it too. From JavaScript, set the property (`field.required = false`) or call `removeAttribute("required")`. Calling `setAttribute("required", "false")` leaves the field required.

Some details depend on the element:

- `<input>`: `required` only applies to types a user can leave empty or unchecked: `text`, `search`, `email`, `url`, `tel`, `password`, `number`, the date and time types, `checkbox`, `radio` and `file`. On `hidden`, `range`, `color` and the button types (`submit`, `reset`, `button`, `image`), it isn't allowed at all, and the validator says so in a separate error. Remove it there instead of fixing the value.
- `<textarea>`: a required text area blocks the form while its value is empty. The text between the opening and closing tags is the starting value, so spaces a template adds for indentation make the field count as filled in before anyone types. Put `</textarea>` right after the opening tag.
- `<select>`: a required drop-down (no `multiple`, and no `size` above `1`) needs a placeholder as its first `<option>`, with `value=""` and directly inside the `<select>`, not in an `<optgroup>`. An option without a `value` attribute uses its text as its value, so `<option>Choose a size</option>` counts as an answer, and the form submits "Choose a size" if the user never opens the list. When the first option isn't a valid placeholder, the validator reports a second error about it, even while `required` has a bad value.

## Invalid example

```html
<form action="/order" method="post">
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required="true">

  <label for="size">Size</label>
  <select id="size" name="size" required="true">
    <option value="">Choose a size</option>
    <option value="s">Small</option>
    <option value="m">Medium</option>
    <option value="l">Large</option>
  </select>

  <label for="notes">Notes (optional)</label>
  <textarea id="notes" name="notes" rows="3" required="false"></textarea>

  <button type="submit">Place order</button>
</form>
```

## Valid example

```html
<form action="/order" method="post">
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>

  <label for="size">Size</label>
  <select id="size" name="size" required>
    <option value="">Choose a size</option>
    <option value="s">Small</option>
    <option value="m">Medium</option>
    <option value="l">Large</option>
  </select>

  <label for="notes">Notes (optional)</label>
  <textarea id="notes" name="notes" rows="3"></textarea>

  <button type="submit">Place order</button>
</form>
```