setCustomValidity

フォームにエラーメッセージを設定できる。手軽に使えて便利。

こんな感じのコードを書いて、メッセージが設定されると

code:js

function validate(inputID) {

const input = document.getElementById(inputID);

const validityState = input.validity;

if (validityState.valueMissing) {

input.setCustomValidity("You gotta fill this out, yo!");

} else if (validityState.rangeUnderflow) {

input.setCustomValidity("We need a higher number!");

} else if (validityState.rangeOverflow) {

input.setCustomValidity("That's too high!");

} else {

input.setCustomValidity("");

}

input.reportValidity();

}

こんな感じでエラーが出る。

https://scrapbox.io/files/650a8dd76f60a2001cc8e679.png