HTML Form Validation Without Javascript (Simple Examples)

Welcome to a quick tutorial on how to do HTML form validation without Javascript. Once upon a time in the Dark Ages of the Internet, form validation used to be a “complicated process” that can only be done in Javascript. But ever since the launch of HTML5, things have become a lot easier.

That covers the quick basics, read on if you need more examples!

ⓘ I have included a zip file with all the demo code at the end of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

TLDR – QUICK SLIDES

[web_stories_embed url=”https://code-boxx.com/web-stories/html-form-validation-without-javascript/” title=”HTML Form Validation Without Javascript” poster=”https://code-boxx.com/wp-content/uploads/2022/03/STORY-HTML-20230505.webp” width=”360″ height=”600″ align=”center”]

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download all the example source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

 

1) USING SPECIFIC FIELD TYPES

<form onsubmit="return false;">
  <h2>ALPHANUMERIC</h2>
  <label>Open Text Field</label>
  <input type="text">
 
  <label>Email</label>
  <input type="email">
 
  <label>Number</label>
  <input type="number">
  <input type="range">
 
  <label>URL</label>
  <input type="url">
 
  <h2>DATE TIME</h2>
  <label>Date</label>
  <input type="date">
 
  <label>Time</label>
  <input type="time">
 
  <label>Date-Time</label>
  <input type="datetime-local">
 
  <label>Week</label>
  <input type="week">
 
  <label>Month</label>
  <input type="month">
 
  <input type="submit" value="Go">
</form>

If you are still using open text fields and manual Javascript checks, it’s time to update. HTML offers a whole range of input fields:

• <input type="email"> only accepts a valid email address.
• <input type="number"> numbers only.
• <input type="range"> a range slider. To be used with min max step, see next example.
• <input type="url"> a valid website address.
• date time datetime-local week month various “date only” input fields.

 

 

2) RESTRICTION ATTRIBUTES

<form onsubmit="return false;">
  <label>Required, 2 to 8 characters.</label>
  <input type="text" required minlength="2" maxlength="8">

  <label>Required, number from 1 to 12.</label>
  <input type="number" required min="1" max="12">
 
  <label>Number from 0 to 10, steps of 2.</label>
  <input type="range" min="0" max="10" step="2">
 
  <input type="submit" value="Go!">
</form>

We can also set some common restrictions in the fields:

• required – This field is required, cannot be left blank.
• minlength – Minimum required characters.
• maxlength – Maximum allowed characters.
• min – Minimum allowed number.
• max – Maximum allowed number.
• step – For the range slider, increment each step.
• pattern – Specify a custom check pattern (see next example).

 

 

3) CUSTOM VALIDATION PATTERNS

There are times when we just need to define our own custom checks, and we can do that by using the pattern attribute. But the problem is, checks are done with regular expressions, which can be very complex at times. Here are some common patterns to get you started.

 

3A) EXACT MATCH

<label>Enter "Doge"</label>
<input type="text" pattern="Doge">

The simplest and most straightforward check, the user input must match the pattern exactly (case sensitive). This is especially good for things like “enter DELETE to confirm”.

 

3B) MATCH MULTIPLE VALUES

<label>Enter "Doge" or "Cate"</label>
<input type="text" pattern="Doge|Cate">

We can use the OR expression | to append more exact matches to the list.

 

3C) MATCHING ALPHABET CASES

<label>Enter "Doge" or "doge"</label>
<input type="text" pattern="[Dd]oge">
<label>Enter "Doge" (Case Insensitive)</label>
<input type="text" pattern="[Dd][Oo][Gg][Ee]">

To match “either-or”, we can enclose it in a pair of square brackets [Dd]. So yes, it’s kind of a pain to do case-insensitive matches.

 

3D) RESTRICTING NUMBERS AND ALPHABETS

<label>Only 0 to 9 allowed</label>
<input type="text" pattern="[0-9]">
<label>Only a to z allowed</label>
<input type="text" pattern="[a-z]">

 

3E) MATCHING A SERIES OF NUMBERS OR ALPHABETS

<label>Matches (0 to 9) 3 times</label>
<input type="text" pattern="[0-9]{3}">
<label>Matches (0 to 9) 1 to 3 times</label>
<input type="text" pattern="[0-9]{1,3}">

Matching a series of numbers and alphabets can be rather confusing. Take extra note:

• [0-9]{3} matches a series of numbers 3 times. That is, 000 to 999.
• [0-9]{1,3} matches a series of up to 3 numbers. That is, 0 to 999.

 

3F) MATCHING TELEPHONE NUMBERS

<label>Phone Number (NNN-NNN-NNN)</label>
<input type="text" pattern="[0-9]{3}-[0-9]{3}-[0-9]{3}"> <br>
<label>Phone Number (NNN-NNN-NNN OR NNN NNN NNN)</label>
<input type="text" pattern="[0-9]{3}[ -][0-9]{3}[ -][0-9]{3}"> <br>

 

 

3G) MATCHING ANY CHARACTERS

<label>Start with "T", followed by 3 characters, end with X</label>
<input type="text" pattern="T.{3}X"> <br>

We use a period . to match any character. This may be useful for verifying stuff like serial numbers with a fixed first character, then followed by a series of random characters.

 

 

THE SUMMARY

Type	Description
text	An open text field.
number	Numbers only.
range	Range slider.
email	Email-only.
url	Website URLs only.
date time datetime-local	Date and time only.

Attribute	Description
required	A required field, cannot be left blank.
maxlength	The maximum number of allowed characters.
minlength	The minimum number of allowed characters.
max	Maximum allowed number.
min	Minimum allowed number.
step	For the range slider, increment each step.
pattern	Specify your own field checking pattern.

 

LINKS & REFERENCES

• HTML Forms – MDN
• Input Fields – MDN
• A ton of common HTML patterns – HTML5Patterns
• How To Show Error Messages In HTML Forms – Code Boxx

 

INFOGRAPHIC CHEAT SHEET