How to Validate Inputs Using Only HTML

Overview 🔍

Validation refers to checking user input and ensuring that it meets specified criteria. If the input is invalid, it can be rejected or adjusted accordingly.

Let's take a look.

---

type=file: accept

<input type="file" accept="image/png">
<input type="file" accept="video/*">
<input type="file" accept="video/*">

The accept attribute restricts the input to specific file types.

For example, accept="image/png" denies the selection of .jpg files.

We can also use * as a wildcard. For instance, accept="video/*" accepts .mp4 and .webm files.

---

type=file, select: multiple

<input type="file" accept="video/*" multiple>

File and select input fields accept one value or file by default.

Using the multiple attribute allows inputting multiple values or files.

---

type=text etc.: pattern

<input type="text" pattern="[a-z]*">
<input type="text" pattern="[a-z]*">
<input type="text" pattern="[a-z]*">

input:invalid {
  border: red solid 3px;
}

The pattern attribute allows using regular expressions to validate input.

If the input does not match the regular expression, the patternMismatch property is set to true, applied the :invalid CSS pseudo-class.

---

type=text etc.: maxlength / minlength

<input type="text" maxlength="15">
<input type="text" minlength="5">

input:invalid {
  border: red solid 3px;
}

The maxlength attribute limits the maximum number of characters a user can input, while minlength sets the minimum required characters.

If the input does not meet the minlength requirement, the field is marked as invalid (:invalid CSS pseudo-class).

---

type=number, range: step / min / max

<input type="number" step="1" min="0" max="100">
<input type="range" step="5" min="0" max="50">

The step attribute specifies intervals between allowed values for number or range input types. For example:

• step="1" allows only whole numbers.
• step="5" in a range input lets users select values in increments of 5 (e.g., 0, 5, 10, ...).

Use the min and max attributes to restrict the range of values further.

---

type=any: required

<input type="text" required>
<input type="text" required>

input:required {
  border: blue solid 3px;
}
input:invalid {
  border: red solid 3px;
}

Fields with the required attribute are styled using the :required CSS pseudo-class and marked as invalid with the :invalid pseudo-class if left empty.

---

type=any: readonly / disabled

<input type="text" value="Read-only" readonly>
<input type="text" value="Disabled" disabled>

These attributes disable some validation.

• The readonly attribute makes an input field non-editable while still allowing users to select and copy the value.
• The disabled attribute disables user interaction with the field entirely, meaning the value cannot be edited, copied, or submitted with the form.

---

form: novalidate / formnovalidate

<form novalidate>
  <input type="text" required>
  <button type="submit">Submit</button>
</form>

<form>
  <input type="text" required>
  <button type="submit" formnovalidate>Submit Without Validation</button>
</form>

• The novalidate attribute disables form validation for the entire form. This is useful for debugging or custom validation using JavaScript.
• The formnovalidate attribute can be added to individual submit buttons to bypass validation for specific submissions.

---

Discussion and Insights 💭

HTML provides many built-in validation attributes to enhance user experience and ensure valid data. These attributes can reduce the reliance on JavaScript for basic validation, simplifying your codebase.

However, it's essential to test validation behaviors across different browsers to ensure consistency. Always combine client-side validation with server-side validation for robust and secure input handling.

Thank you for reading! 🙌