HTMLInputElement: reportValidity() method

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since December 2018.

The reportValidity() method of the HTMLInputElement interface performs the same validity checking steps as the checkValidity() method. In addition, if the invalid event is not canceled, the browser displays the problem to the user.

Syntax

js
reportValidity()

Parameters

None.

Return value

Returns true if the element's value has no validity problems; otherwise, returns false.

Examples

Basic usage

HTML

We include a form containing a required number field and two buttons: one to check the form and the other to submit it.

html
<form action="#" method="post">
  <p>
    <label for="age">Your (21 to 65) </label>
    <input type="number" name="age" required id="age" min="21" max="65" />
  </p>
  <p>
    <button type="submit">Submit</button>
    <button type="button" id="report">reportValidity()</button>
  </p>
  <p id="log"></p>
</form>

JavaScript

When the "reportValidity()" button is activated, we use the reportValidity() method to check if the input's value meets its constraints. We log the return value. If false, we also display the validation message and capture the invalid event.

js
const output = document.querySelector("#log");
const reportButton = document.querySelector("#report");
const ageInput = document.querySelector("#age");

ageInput.addEventListener("invalid", () => {
  console.log("Invalid event fired.");
});

reportButton.addEventListener("click", () => {
  const reportVal = ageInput.reportValidity();
  output.innerHTML = `"reportValidity()" returned: ${reportVal}`;
  if (!reportVal) {
    output.innerHTML += `<br />Validation message: "${ageInput.validationMessage}"`;
  }
});

Results

When false, if the value is missing, is below 21, is above 65, or is otherwise invalid, an error message appears, an invalid event is fired, and we log that invalid event to the console.

Custom error message

This example demonstrates how a custom error message can cause a false return value when the value is otherwise valid.

HTML

We add a "Fix me" button to the HTML from the previous example.

html
<button type="button" id="fix">Fix issues</button>

JavaScript

We expand on the JavaScript from the basic example above, adding a function that used the HTMLInputElement.setCustomValidity() method to provide custom error messages. The validateAge() function only sets the error message to an empty string if the input is valid AND the enableValidation variable is true, with enableValidation being false until the "fix issues" button has been activated.

javascript
const output = document.querySelector("#log");
const reportButton = document.querySelector("#report");
const ageInput = document.querySelector("#age");
const fixButton = document.querySelector("#fix");
let enableValidation = false;

fixButton.addEventListener("click", (e) => {
  enableValidation = true;
  fixButton.innerHTML = "Error fixed";
  fixButton.disabled = true;
});

reportButton.addEventListener("click", () => {
  validateAge();
  const reportVal = ageInput.reportValidity();
  output.innerHTML = `"reportValidity()" returned: ${reportVal}`;
  if (!reportVal) {
    output.innerHTML += `<br />Validation message: "${ageInput.validationMessage}"`;
  }
});

const validateAge = () => {
  const validityState_object = ageInput.validity;
  if (validityState_object.valueMissing) {
    ageInput.setCustomValidity("Please set an age (required)");
  } else if (ageInput.rangeUnderflow) {
    ageInput.setCustomValidity("Your value is too low");
  } else if (ageInput.rangeOverflow) {
    ageInput.setCustomValidity("Your value is too high");
  } else if (enableValidation) {
    // sets to empty string if valid AND enableValidation has been set to true
    ageInput.setCustomValidity("");
  }
};

Results

If you activate the "reportValidity()" button before entering an age, the reportValidity() method returns false because it does not meet required constraint validation. This method fires an invalid event on the input and reports the problem to the user, displaying the custom error message "Please set an age (required)". As long as a custom error message is set, activating the "reportValidity()" button will continue to display an error even if you select a valid age. To enable validation, we have to set the custom error message to the empty string, which is done by clicking the "Fix issues" button.

Specifications

Specification
HTML Standard
# dom-cva-reportvalidity-dev

Browser compatibility

BCD tables only load in the browser

See also