A method that checks if the input meets the rules and returns whether it’s valid or not.
checkValidity()
は、フォーム要素(例:<input>
や<form>
)が 現在の入力値でルール(必須入力や範囲指定など)を守っているかどうかをチェックするメソッド です。
例えば、required
属性があるのに空欄だったり、type="email"
にメールアドレスではない文字列が入っていた場合、checkValidity()
は false
(無効) を返します。逆にすべての条件を満たしていれば true
(有効) を返します。
主な特徴:
form
要素に対して使うと、フォーム内の全ての入力欄をまとめてチェックできる例:
HTML
<form id="myForm">
<input type="email" required>
<button type="button" id="checkBtn">確認</button>
</form>
<script>
document.getElementById('checkBtn').addEventListener('click', () => {
const form = document.getElementById('myForm');
if (form.checkValidity()) {
alert('すべて正しく入力されています!');
} else {
alert('入力内容に誤りがあります。');
}
});
</script>