Movatterモバイル変換


[0]ホーム

URL:


  1. Web
  2. Web APIs
  3. HTMLInputElement
  4. checkValidity()

HTMLInputElement: checkValidity() method

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

ThecheckValidity() method of theHTMLInputElement interface returns a boolean value which indicates if the element meets anyconstraint validation rules applied to it. If false, the method also fires aninvalid event on the element. Because there's no default browser behavior forcheckValidity(), canceling thisinvalid event has no effect.

Note:An HTML<input> element with a non-nullvalidationMessage is considered invalid, will match the CSS:invalid pseudo-class, and will causecheckValidity() to return false. Use theHTMLInputElement.setCustomValidity() method to set theHTMLInputElement.validationMessage to the empty string to set thevalidity state to be valid.

Syntax

js
checkValidity()

Parameters

None.

Return value

Returnstrue if the element's value has no validity problems; otherwise, returnsfalse.

Examples

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 min="21" max="65" />  </p>  <p>    <button type="submit">Submit</button>    <button type="button">checkValidity()</button>  </p>  <p></p></form>

JavaScript

js
const output = document.querySelector("#log");const checkButton = document.querySelector("#check");const ageInput = document.querySelector("#age");ageInput.addEventListener("invalid", () => {  console.log("Invalid event fired.");});checkButton.addEventListener("click", () => {  const checkVal = ageInput.checkValidity();  output.innerHTML = `checkValidity returned: ${checkVal}`;});

Results

Whenfalse, if the value is missing, below 21, above 65, or otherwise invalid, the invalid event will be logged to the console. To report the error to the user, useHTMLInputElement.reportValidity() instead.

Specifications

Specification
HTML
# dom-cva-checkvalidity-dev

Browser compatibility

See also

Help improve MDN

Learn how to contribute

This page was last modified on byMDN contributors.


[8]ページ先頭

©2009-2025 Movatter.jp