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.

HTML offers a number of ways to do form validation without Javascript:

  1. By restricting the type of field and allowed input. For example, <input type="email"/> only allows email addresses.
  2. Marking required fields that cannot be left blank – <textarea required>.
  3. Restricting the minimum and maximum number input – <input type="number" min="1" max="99"/>
  4. Restricting the number of characters – <input type="password" minlength="4" maxlength="12">
  5. Lastly, we can also specify our own custom check patterns – <input type="text" pattern="dog|cat"/>

That covers the quick basics, but read on for 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.

 

 

REAL QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes Form Validation Useful Bits & Links
The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

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.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer 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.

 

 

HTML FORM VALIDATION

All right, let us now get into the examples of how to do HTML form validation.

 

1) FIELD TYPES

1-field-type.html
<form onsubmit="return false;">
  <h1>OPEN ENTRY</h1>
  Open <input type="text"/> <br>
  Email <input type="email"/> <br>
  Number <input type="number"/> <br>
  URL <input type="url"/> <br>
 
  <h1>DATE TIME</h1>
  Date <input type="date"/> <br>
  Time <input type="time"/> <br>
  Date-Time <input type="datetime-local"/> <br>
  Week <input type="week"/> <br>
  Month <input type="month"/> <br>
 
  <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="url"/> a valid website address.
  • date time datetime-local week month various “date only” input fields.

 

 

2) RESTRICTION ATTRIBUTES

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

  Required, number from 1 to 12.
  <input type="number" required
         min="1" max="12"/> <br>
 
  <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.
  • pattern – Specify a custom check pattern (see next example).

 

 

3) CUSTOM VALIDATION PATTERNS

There are times where 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.

 

EXACT MATCH

3-patterns.html
Enter "Doge"
<input type="text" pattern="Doge"/> <br>

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”.

 

MATCH MULTIPLE VALUES

3-patterns.html
Enter "Doge" or "Cate"
<input type="text" pattern="Doge|Cate"/> <br>

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

 

MATCHING ALPHABET CASES

3-patterns.html
Enter "Doge" or "doge"
<input type="text" pattern="[Dd]oge"/> <br>
Enter "Doge" (Case Insensitive)
<input type="text" pattern="[Dd][Oo][Gg][Ee]"/> <br>

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.

 

RESTRICTING NUMBERS AND ALPHABETS

3-patterns.html
Only 0 to 9 allowed
<input type="text" pattern="[0-9]"/> <br>
Only a to z allowed
<input type="text" pattern="[a-z]"/> <br>

 

MATCHING A SERIES OF NUMBERS OR ALPHABETS

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

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.

 

MATCHING TELEPHONE NUMBERS

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

 

 

MATCHING ANY CHARACTERS

3-patterns.html
Start with "T", followed by 3 characters, end with X
<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 series of random characters.

 

USEFUL BITS & LINKS

That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.

 

INFOGRAPHIC CHEAT SHEET

HTML Form Validation (Click to enlarge)

 

THE SUMMARY

Input field types
Type Description
text An open text field.
number Numbers only.
email Email-only.
url Website URLs only.
date time
datetime-local
Date and time only.
Validation attributes
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.
pattern Specify your own field checking pattern.

 

LINKS & REFERENCES

 

THE END

Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *