HTML-Only Form Validation

1. HTML5 Form Validation

Modern browsers can automatically check form input when a user submits a form. By adding validation attributes directly in your HTML, you can prevent empty or incorrectly formatted submissions without writing JavaScript.

Client-side validation happens in the web browser before the form is submitted. When a user clicks the submit button, the browser checks each field against the rules you added, such as required or pattern. If a field does not meet those rules, the form does not submit, and the browser displays a validation message.

This immediate feedback helps users correct mistakes quickly and reduces frustration by catching problems early.

When a user submits a form, the browser performs validation in a specific sequence:

1. The user clicks the submit button or presses “Enter.”
2. The browser checks each form field against its validation constraints.
3. If all fields pass, the form submits normally.
4. If any field fails, the browser stops submission and focuses on the first invalid field.
5. The browser displays a validation message explaining the error.

EXAMPLE

Consider the following form:

<form action="/signup" method="post">

<label for="email">Email Address:</label>

<input type="email" id="email" name="email" required>

<button type="submit">Sign Up</button>

</form>

In this code:

• The type="email" attribute tells the browser to check for a valid email format.
• The required attribute prevents submission if the field is empty.
• If the user submits an empty or improperly formatted email, the browser displays an error and blocks submission.

term to know

Client-Side Validation

Checking user input in the browser before data is sent to a server, providing immediate feedback without requiring a page reload.

2. Validation Attributes

HTML5 provides built-in validation attributes that define what counts as acceptable input. By applying these attributes to form elements, you control what values users can submit.

recall

In an earlier tutorial, you learned that certain input types such as email, url, and number define expected formats. These types also trigger automatic validation, allowing the browser to check that the entered value matches the required format.

2a. 'required'

The required attribute ensures a field cannot be left empty. If a required field has no value when the form is submitted, the browser treats it as invalid.

EXAMPLE

<form action="/register" method="post">

<label for="username">Username:</label>

<input type="text" id="username" name="username" required>

<br>

<label for="bio">Bio (optional):</label>

<textarea id="bio" name="bio"></textarea>

<br>

<button type="submit">Create Account</button>

</form>

In this code:

• The username field includes required, so it must contain a value.
• The bio field does not include required, so it is optional.

The required attribute is a boolean attribute. Simply including the word activates validation. No value is needed. The required attribute works on most input types, as well as <textarea> and <select> elements.

try it

Open your index.html file in Codespace.

1. Identify the fields that should be mandatory, such as name or email.
2. Add the required attribute to those input elements.
3. Leave at least one field without required so that it remains optional.

Preview your file in Codespace.

Confirm that:

• The form does not submit when a required field is left empty.
• The browser highlights the empty field and displays a validation message.

term to know

required Attribute

An HTML boolean attribute that prevents form submission unless the field contains a value.

2b. Type Validation

The type attribute on <input> elements can enforce basic format rules. When you use specialized input types such as email, url, or number, the browser automatically checks that the entered value matches the expected format.

EXAMPLE

<form action="/profile" method="post">

<label for="email">Email:</label>

<input type="email" id="email" name="email" required>

<br>

<label for="website">Website:</label>

<input type="url" id="website" name="website">

<br>

<button type="submit">Save Profile</button>

</form>

In this code:

• The type="email" field automatically checks that the value follows a valid email structure. If a user enters values such as john or john@, the browser will display a validation error because the input does not contain both an @ symbol and a properly formatted domain.
• The required attribute on the email field prevents the form from being submitted if the field is left empty. The browser highlights the field and displays a message until a valid email is entered.
• The type="url" field checks that the value is a properly formatted web address. Most browsers expect a full URL that includes the protocol, such as https://example.com. If the protocol is missing, the browser may treat the input as invalid and block submission.

2c. 'minlength' and 'maxlength'

The minlength and maxlength attributes control how many characters a user can enter in a text-based field.

The minlength attribute sets the minimum number of characters required for a value to be considered valid. If the value is shorter than the specified minimum when the form is submitted, the field is treated as invalid.

The maxlength attribute sets the maximum number of characters allowed. Unlike minlength, maxlength restricts input as the user types, preventing additional characters once the limit is reached.

EXAMPLE

<label for="username">Username (3-20 characters):</label>
<input type="text" id="username" name="username" minlength="3" maxlength="20" required>

<label for="password">Password (minimum 8 characters):</label>
<input type="password" id="password" name="password" minlength="8" required>

In this code:

• The username field must contain at least 3 characters and no more than 20.
• The password field must contain at least 8 characters, with no maximum limit set.

These attributes work with text-based inputs and <textarea> elements.

try it

Add a <textarea> to your form file for user comments, requiring between 10 and 500 characters.

1. Add a <label> and <textarea> pair for a “Comments” field.
2. Set minlength="10" and maxlength="500" on the textarea.
3. Add required if the field should be mandatory.

Preview in your Codespace. Try submitting with fewer than 10 characters.

What happens when a user types more than 500 characters into a field with maxlength="500"?

The browser stops accepting input after 500 characters. Unlike minlength, which shows a validation error on submit, maxlength actively prevents the user from exceeding the limit while typing.

terms to know

minlength Attribute

An HTML attribute specifying the minimum number of characters a text input must contain for validation to pass.

maxlength Attribute

An HTML attribute specifying the maximum number of characters a text input can contain. The browser also prevents users from typing beyond this limit.

3. Numeric and Date Constraints

Number, date, range, and time inputs include validation attributes that control acceptable values. These attributes allow you to define limits and increments so users can only enter values within a specified range.

3a. 'min' and 'max'

The min and max attributes set lower and upper bounds. They define the smallest and largest acceptable values for numeric, date, range, and time inputs.

EXAMPLE

<label for="quantity">Quantity (1-10):</label>
<input type="number" id="quantity" name="quantity" min="1" max="10" required>

<label for="checkin">Check-in Date:</label>
<input type="date" id="checkin" name="checkin" min="2024-01-01" max="2024-12-31" required>

In this code:

• The quantity field only accepts numbers between 1 and 10.
• The check-in date field restricts selections to the year 2024. For date inputs, min and max use the YYYY-MM-DD format.
• If the user enters a value outside the range, the browser blocks submission and displays an error.

terms to know

min Attribute

An HTML attribute specifying the minimum acceptable value for number, date, and range inputs.

max Attribute

An HTML attribute specifying the maximum acceptable value for number, date, and range inputs.

3b. 'step'

The step attribute controls the increment between valid values for number, date, range, and time inputs. While min and max define boundaries, step defines the spacing between acceptable values.

For numeric inputs, step determines how much the value increases or decreases when using the input controls. If a user enters a value that does not align with the defined increment, the field is treated as invalid.

EXAMPLE

<label for="amount">Donation (increments of $5):</label>
<input type="number" id="amount" name="amount" min="5" max="500" step="5" required>

In this code:

• The minimum donation is 5, and the maximum is 500.
• The value must increase in multiples of 5, such as 5, 10, 15, or 20.
• If a user enters 7 or 12, the browser treats the value as invalid because it does not match the defined increment.

For time inputs, the step value is measured in seconds. For example, step="1800" creates 30-min increments because 1800 s equals 30 min.

EXAMPLE

<label for="appointment">Appointment Time:</label>
<input type="time" id="appointment" name="appointment" min="09:00" max="17:00" step="1800" required>

In this code:

• The time must fall between 9 a.m. and 5 p.m.
• Appointments can only be scheduled in 30-min increments.

The following table summarizes the numeric and date constraint attributes:

try it

Add an appointment time input to your form file that only allows 30-min increments between 9 AM and 5 PM.

1. Add a <label> and <input> pair with type="time".
2. Set min="09:00" and max="17:00".
3. Set step="1800" (1800 s = 30 min).
4. Add required.

Preview in your Codespace.

What does your finished input element look like?

<label for="appointment">Appointment Time:</label>
<input type="time" id="appointment" name="appointment" min="09:00" max="17:00" step="1800" required>

term to know

step Attribute

An HTML attribute specifying valid increments between values for number, date, and time inputs.

4. Pattern Matching

Built-in input types such as email and url automatically validate common formats. However, some validation rules require more precise control. When built-in types are not enough, you can use the pattern attribute to define custom format requirements using a regular expression, often called a regex.

terms to know

pattern Attribute

An HTML attribute specifying a regular expression that the input value must match for validation to pass.

Regular Expression (regex)

A sequence of characters that defines a text pattern used to match or validate specific formats.

4a. 'pattern'

The pattern attribute applies a regular expression to a form field. The value entered by the user must follow the structure defined by that expression in order to be considered valid.

key concept

When using the pattern attribute, the entire input value must match the regular expression. Partial matches do not pass validation. This attribute works with text-based input types such as text, tel, email, url, password, and search.

EXAMPLE

<!-- US Phone: 123-456-7890 -->
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">

<!-- US ZIP Code: 12345 or 12345-6789 -->
<label for="zip">ZIP Code:</label>
<input type="text" id="zip" name="zip" pattern="[0-9]{5}(-[0-9]{4})?">

<!-- Username: letters, numbers, underscores -->
<label for="username">Username:</label>
<input type="text" id="username" name="username" pattern="[A-Za-z0-9_]+">

In this code:

• The phone field requires the format 123-456-7890.
• The ZIP code field accepts either five digits or five digits followed by a dash and four digits.
• The username field allows one or more letters, numbers, or underscores.

These patterns define exactly what structure the input must follow.

The following table breaks down common regex patterns you may encounter:

You do not need to memorize regular expression syntax. Developers commonly look up patterns as needed. The important skill is understanding how the pattern attribute enforces a format and applying an appropriate expression to a form field.

4b. 'title'

The title attribute provides a clear, human-readable description of the expected format for a form field. When validation fails, the browser includes this text in its error message. In many browsers, the title also appears as a tooltip when users hover over the field.

EXAMPLE

<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" title="Enter phone as 123-456-7890" required>

In this code:

• The pattern defines the required structure.
• The title explains that structure in plain language.

Adding a title helps users understand exactly what format is expected.

try it

Add a product code field to your form file that accepts exactly two uppercase letters followed by four digits (like AB1234). Include a helpful title attribute.

1. Add a <label> and <input> pair for “Product Code.”
2. Set pattern="[A-Z]{2}[0-9]{4}".
3. Set title="Enter 2 uppercase letters followed by 4 digits (e.g., AB1234)".
4. Add required.

Preview. Try entering an invalid code like ab12 to see the validation message.

What does your finished input element look like?

<label for="product">Product Code:</label>
<input type="text" id="product" name="product" pattern="[A-Z]{2}[0-9]{4}" title="Enter 2 uppercase letters followed by 4 digits (e.g., AB1234)" required>

term to know

title Attribute (on Form Inputs)

An HTML attribute providing advisory text about a form field’s expected format, displayed as a tooltip and included in validation error messages.

5. Validation Behavior

Real-world forms often require multiple validation rules on a single field and sometimes need validation disabled entirely.

5a. Combining Attributes

You can add multiple validation attributes to a single input. All rules must pass for the field to be valid.

EXAMPLE

<label for="username">Username:</label>
<input type="text" id="username" name="username" required minlength="4" maxlength="15" pattern="[a-z][a-z0-9_]*" title="Start with a letter, use lowercase letters, numbers, underscores">

In this code:

• required: The field cannot be empty.
• minlength="4": The value must be at least 4 characters.
• maxlength="15": The value cannot exceed 15 characters.
• pattern="[a-z][a-z0-9_]*": The value must start with a lowercase letter and contain only lowercase letters, numbers, or underscores.
• title: This provides a human-readable explanation of the pattern requirements.

5b. 'novalidate'

The novalidate attribute disables all built-in browser validation for an entire form. When this attribute is added to the <form> element, the browser will submit the form without checking required fields, patterns, or other validation rules.

The related formnovalidate attribute can be added to a specific submit button. When that button is used, validation is bypassed only for that submission. Other submit buttons in the same form will still trigger normal validation.

EXAMPLE

<form action="/article" method="post">

<label for="content">Content:</label>

<textarea id="content" name="content" required></textarea>

<br>

<button type="submit">Publish</button>

<button type="submit" formnovalidate formaction="/draft">Save Draft</button>

</form>

In this code:

• Clicking “Publish” triggers normal validation—the required textarea must have content.
• Clicking “Save Draft” bypasses validation entirely thanks to formnovalidate, allowing users to save incomplete work.
• The formaction="/draft" attribute sends draft data to a different server endpoint.

terms to know

novalidate Attribute

An HTML attribute added to a <form> element that disables all browser validation for the entire form.

formnovalidate Attribute

An HTML attribute added to a submit button that disables validation for that specific button only, while other buttons in the same form still validate.

5c. Limitations

HTML validation is powerful but has important limitations that every developer should understand.

key concept

HTML validation occurs only in the browser and can be bypassed. Users can disable it using browser developer tools or submit data directly to your server. Server-side validation is always required for security.

try it

Open your form file in Codespace. You will refine your existing form into a complete, validated contact form.

Update your form structure:

• Update the <fieldset> with a <legend> labeled “Contact Information.”
  • Move your “Name” and “Email” fields into this fieldset.

Apply validation to the “Name” field:

• type="text"
• required, minlength="2", maxlength="50"

Apply validation to the “Email” field:

• type="email"
• required

Add a “Phone” field:

• type="tel"
• pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
• title="Enter phone as 123-456-7890"

Add a “Message” field:

• Create a <label> and <textarea> for “Message.”
• Add required, minlength="20", maxlength="1000".

Review the rest of your form:

• Ensure fields like quantity and event date use appropriate validation.
• Examples: min, max, required

Test your form:

• Submit with empty required fields.
• Enter an invalid email.
• Enter an incorrectly formatted phone number.
• Enter a message that is too short.

Observe how the browser blocks submission and displays validation feedback.

What might a completed contact form look like?

<form action="/contact" method="post">

<fieldset>

<legend>Contact Information</legend>

<label for="name">Name</label>

<input type="text" id="name" name="name" required minlength="2" maxlength="50">

<label for="email">Email</label>

<input type="email" id="email" name="email" required>

<label for="phone">Phone :</label>

<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" title="Enter phone as 123-456-7890">

</fieldset>

<label for="message">Message</label>

<textarea id="message" name="message" required minlength="20" maxlength="1000"></textarea>

<button type="submit">Send</button>

</form>

Your form may look different depending on how you structured it earlier. Focus on using clear labels, grouping related fields with <fieldset>, and applying appropriate validation attributes to each input.

watch

In this video, you will enhance an HTML form by adding validation features, including required fields, input length restrictions, a phone number pattern, and guidance messages.

REFERENCES

Mozilla Developer Network. (n.d.). How the web works. developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works