Codectionary / Developer documentation / HTML

Native Form Constraint Validation

HTML form constraints such as required, min, max, step, and pattern allow browsers to check values before ordinary submission. reportValidity() both checks constraints and requests feedback. Validation messages and UI vary across browsers; client-side checks never replace server-side validation.

Syntax

<input type="number" min="1" max="8" step="1" required>
form.reportValidity();

Examples

Native Form Constraint Validation: working example

Save as an HTML file and open it in a browser. Expected result: An empty value, 0, 9, or 1.5 is rejected; a whole number from 1 through 8 displays Seat count accepted.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Working example</title>
</head>
<body>
<form id="booking">
  <label>Seats <input name="seats" type="number" min="1" max="8" step="1" required></label>
  <button type="submit">Reserve</button>
</form>
<output id="status"></output>
<script>
document.querySelector("#booking").addEventListener("submit", event => {
  event.preventDefault();
  document.querySelector("#status").textContent = "Seat count accepted";
});
</script>
</body>
</html>
  1. Expected result: An empty value, 0, 9, or 1.5 is rejected; a whole number from 1 through 8 displays Seat count accepted.
  2. Normal interactive submission validates controls before firing the submit event.
  3. step="1" rejects fractional seat counts relative to the allowed step base.

Best practices

  • Explain input requirements visibly before users make mistakes.
  • Use requestSubmit() when programmatically triggering normal submission behavior; form.submit() bypasses interactive validation.

Browser compatibility

Support applies to the named feature, not every attribute or behaviour in this article. Versions refer to browsers, not operating systems.

Constraint support is separate from the wording and appearance of native validation messages.

<input> type="number"

Desktop

Chrome
Supported
From 7
Firefox
Supported
From 29
Safari
Supported
From 5.1
Edge
Supported
From 12
Opera
Supported
From 15

Mobile

Safari on iOS
Supported
From 5
Chrome for Android
Supported
From 18
Firefox for Android
Supported
From 29
Samsung Internet
Supported
From 1.0

MDN BCD record for this feature · MDN reference

Support history and limitations

Chrome

  • From 7 · Prevents users from typing non-numeric content.

Firefox

  • From 29 · Allows users to type non-numeric content, with the value reflecting an empty string.

Safari

  • From 5.1 · Allows users to type non-numeric content, with the value reflecting an empty string.

Edge

  • From 12

Opera

  • From 15 · Prevents users from typing non-numeric content.

Safari on iOS

  • From 5 · Allows users to type non-numeric content, with the value reflecting an empty string.

Chrome for Android

  • From 18 · Prevents users from typing non-numeric content.

Firefox for Android

  • From 29 · Allows users to type non-numeric content, with the value reflecting an empty string.

Samsung Internet

  • From 1.0 · Prevents users from typing non-numeric content.
<input> required

Desktop

Chrome
Supported
From 4
Firefox
Supported
From 4
Safari
Supported
From 5
Edge
Supported
From 12
Opera
Supported
By 12.1 (possibly earlier)

Mobile

Safari on iOS
Supported
From 4
Chrome for Android
Supported
From 18
Firefox for Android
Supported
From 4
Samsung Internet
Supported
From 1.0

MDN BCD record for this feature · MDN reference

Support history and limitations

Chrome

  • From 4

Firefox

  • From 4

Safari

  • From 5

Edge

  • From 12

Opera

  • By 12.1 (possibly earlier)

Safari on iOS

  • From 4

Chrome for Android

  • From 18

Firefox for Android

  • From 4

Samsung Internet

  • From 1.0
<input> min

Desktop

Chrome
Supported
From 4
Firefox
Supported
From 16
Safari
Supported
From 5
Edge
Supported
From 12
Opera
Supported
By 12.1 (possibly earlier)

Mobile

Safari on iOS
Supported
From 4
Chrome for Android
Supported
From 18
Firefox for Android
Supported
From 16
Samsung Internet
Supported
From 1.0

MDN BCD record for this feature · MDN reference

Support history and limitations

Chrome

  • From 4

Firefox

  • From 16

Safari

  • From 5

Edge

  • From 12

Opera

  • By 12.1 (possibly earlier)

Safari on iOS

  • From 4

Chrome for Android

  • From 18

Firefox for Android

  • From 16

Samsung Internet

  • From 1.0
<input> max

Desktop

Chrome
Supported
From 4
Firefox
Supported
From 16
Safari
Supported
From 5
Edge
Supported
From 12
Opera
Supported
By 12.1 (possibly earlier)

Mobile

Safari on iOS
Supported
From 4
Chrome for Android
Supported
From 18
Firefox for Android
Supported
From 16
Samsung Internet
Supported
From 1.0

MDN BCD record for this feature · MDN reference

Support history and limitations

Chrome

  • From 4

Firefox

  • From 16

Safari

  • From 5

Edge

  • From 12

Opera

  • By 12.1 (possibly earlier)

Safari on iOS

  • From 4

Chrome for Android

  • From 18

Firefox for Android

  • From 16

Samsung Internet

  • From 1.0
<input> step

Desktop

Chrome
Supported
From 5
Firefox
Supported
From 16
Safari
Supported
From 5
Edge
Supported
From 12
Opera
Supported
By 12.1 (possibly earlier)

Mobile

Safari on iOS
Supported
From 4
Chrome for Android
Supported
From 18
Firefox for Android
Supported
From 16
Samsung Internet
Supported
From 1.0

MDN BCD record for this feature · MDN reference

Support history and limitations

Chrome

  • From 5

Firefox

  • From 16

Safari

  • From 5

Edge

  • From 12

Opera

  • By 12.1 (possibly earlier)

Safari on iOS

  • From 4

Chrome for Android

  • From 18

Firefox for Android

  • From 16

Samsung Internet

  • From 1.0
<input> pattern

Desktop

Chrome
Supported
From 4
Firefox
Supported
From 4
Safari
Supported
From 5
Edge
Supported
From 12
Opera
Supported
By 12.1 (possibly earlier)

Mobile

Safari on iOS
Supported
From 4
Chrome for Android
Supported
From 18
Firefox for Android
Supported
From 4
Samsung Internet
Supported
From 1.0

MDN BCD record for this feature · MDN reference

Support history and limitations

Chrome

  • From 4

Firefox

  • From 4

Safari

  • From 5

Edge

  • From 12

Opera

  • By 12.1 (possibly earlier)

Safari on iOS

  • From 4

Chrome for Android

  • From 18

Firefox for Android

  • From 4

Samsung Internet

  • From 1.0
HTMLInputElement.reportValidity

Desktop

Chrome
Supported
From 40
Firefox
Supported
From 49
Safari
Supported
From 10.1
Edge
Supported
From 17
Opera
Supported
From 27

Mobile

Safari on iOS
Supported
From 10.3
Chrome for Android
Supported
From 40
Firefox for Android
Supported
From 64
Samsung Internet
Supported
From 4.0

MDN BCD record for this feature · MDN reference

Support history and limitations

Chrome

  • From 40

Firefox

  • From 49

Safari

  • From 10.1

Edge

  • From 17

Opera

  • From 27

Safari on iOS

  • From 10.3

Chrome for Android

  • From 40

Firefox for Android

  • From 64

Samsung Internet

  • From 4.0
HTMLFormElement.reportValidity

Desktop

Chrome
Supported
From 40
Firefox
Supported
From 49
Safari
Supported
From 10.1
Edge
Supported
From 17
Opera
Supported
From 27

Mobile

Safari on iOS
Supported
From 10.3
Chrome for Android
Supported
From 40
Firefox for Android
Supported
From 49
Samsung Internet
Supported
From 4.0

MDN BCD record for this feature · MDN reference

Support history and limitations

Chrome

  • From 40

Firefox

  • From 49

Safari

  • From 10.1

Edge

  • From 17

Opera

  • From 27

Safari on iOS

  • From 10.3

Chrome for Android

  • From 40

Firefox for Android

  • From 49

Samsung Internet

  • From 4.0
HTMLInputElement.setCustomValidity

Desktop

Chrome
Supported
From 4
Firefox
Supported
From 4
Safari
Supported
From 5
Edge
Supported
From 12
Opera
Supported
By 12.1 (possibly earlier)

Mobile

Safari on iOS
Supported
From 4
Chrome for Android
Supported
From 18
Firefox for Android
Supported
From 4
Samsung Internet
Supported
From 1.0

MDN BCD record for this feature · MDN reference

Support history and limitations

Chrome

  • From 4 · This method only updates the validation error popup, not the tooltip that appears when hovering the mouse over the element, see bug 41380670.

Firefox

  • From 4

Safari

  • From 5

Edge

  • From 12

Opera

  • By 12.1 (possibly earlier)

Safari on iOS

  • From 4

Chrome for Android

  • From 18 · This method only updates the validation error popup, not the tooltip that appears when hovering the mouse over the element, see bug 41380670.

Firefox for Android

  • From 4

Samsung Internet

  • From 1.0 · This method only updates the validation error popup, not the tooltip that appears when hovering the mouse over the element, see bug 41380670.

MDN BCD 8.1.5 · Dataset built 2026-10-08 · Mapping reviewed 2026-10-21. These dates are not individual browser-test or claim-verification dates. Unknown means the data does not establish support.

HTML Living Standard

Specifications & further reading