It checks whether the form input meets the specified rules.
valid
プロパティは、フォーム入力がルール通りかどうかを調べるための真偽値(true / false)を返すものです。
例えば、<input>
要素に「必須入力」「数字のみ」「メール形式」などのルールを設定しておくと、ユーザーが入力した値がそれらのルールを満たしているかをvalid
で確認できます。
true
false
HTML
<input type="email" id="userEmail" placeholder="[email protected]" required>
<button id="checkBtn">チェック</button>
<p id="result"></p>
<script>
const emailInput = document.getElementById("userEmail");
const result = document.getElementById("result");
document.getElementById("checkBtn").addEventListener("click", () => {
if (emailInput.validity.valid) {
result.textContent = "入力内容は正しいです。";
} else {
result.textContent = "入力内容に誤りがあります。";
}
});
</script>
このように、ユーザーの入力が条件を満たしているかどうかを手軽にチェックできるのがvalid
の特徴です。