JavaScript

A mechanism that detects an error when the input value is smaller than the specified minimum value.

rangeUnderflow

rangeUnderFlow は、HTMLフォームの入力要素（特に <input type="number"> や <input type="date"> など）で 指定された最小値（min属性）よりも小さい値が入力されている場合に発生するバリデーション状態です。

たとえば、以下のような入力欄を考えます。

<input type="number" min="10" id="ageInput">

このとき、ユーザーが 8 を入力すると、最小値10より小さいため、rangeUnderflow が true になります。逆に、12 を入力した場合は範囲内なので rangeUnderflow は false です。

JavaScriptでは以下のようにして判定できます。

const input = document.getElementById('ageInput');
if (input.validity.rangeUnderflow) {
	console.log('入力値が最小値より小さいです');
}

この機能を使うと、ユーザーが誤った値を入力したときにカスタムエラーメッセージを表示したり、送信を防止したりできます。

ポイントは「最小値未満の入力があるかどうか」を自動でチェックできることです。