Home » HTML5 » HTML5 Number Validation Example

About Olayemi Odunayo

I am a programmer and web developer, who has experience in developing websites and writing desktop and mobile applications. I have worked with both schematic and schemaless databases. I am also familiar with third party API and working with cloud servers. I do programming on the client side with Java, JavaScript, html, Ajax and CSS while I use PHP for server side programming.

HTML5 Number Validation Example

This Example will focus on Number validation on the web or simply HTML5 number validation. It is common place to process numbers on the web (the numbers might be a users age, date of birth or telephone numbers ). When or after collecting these numbers, it becomes necessary to validate this input, so as to avoid storing invalid or corrupted data.
 
 
 
 
 
 
 

 
For example a user can maliciously or unintentionally enter a letter when asked for his/her age, your web app should be smart enough to recognize this blunder and alert the user.
In this example we will learn how to validate numbers in HTML5.
For this example we will use:

  • A computer with a modern browser installed.
  • notepad++.

1. Getting Started

In this tutorial we will start with simple examples and move on to more complex ones. Lets start with dates.

1.1 Dates

In this example we will consider dates as numbers- though some might argue against it. It’s wrong to collect a user date of birth or dates in general with < input type=text> You should always use < input type=date >.

Here’s an Example:

index.html

<!DOCTYPE html> 
<html lang=en>
	<head>
	<style>
	html, body{
	width:100%;
	height:100%;
	margin:0%;
	font-family:"helvetica","verdana","calibri", "san serif";
	overflow:visible;
	padding:0%;
	border:0%;
	}
	 
	</style>
	 		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/>
	
	<title> HTML5 Image Zoom Example </title>
	<style>


</style>
	</head>
	<body>
<input type=date>

	</body>
	</html>

When you use an input of type date, depending on browser support, a date picker can show up in the input field.

1.2 Telephone Numbers

HTML5 provides an input type for telephone numbers. Line-breaks are automatically removed from the input value, but no other syntax is enforced.

  Telephone:
   <input type="tel"name="phone">

The input type tel is currently supported only in Safari 8.

1.3 Month

HTML5 provides an input type for month and year, depending on browser support, a date picker can show up in the input field.

index2.html

<!DOCTYPE html> 
<html lang=en>
	<head>
	<style>
	html, body{
	width:100%;
	height:100%;
	margin:0%;
	font-family:"helvetica","verdana","calibri", "san serif";
	overflow:visible;
	padding:0%;
	border:0%;
	}
	 
	</style>
	 		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/>
	
	<title> HTML5 Number Validation Example </title>
	<style>


</style>
	</head>
	<body>
<input type=month name=mon>

	</body>
	</html>

1.4 Week

HTML5 provides an input type for week and year, depending on browser support, a date picker can show up in the input field.

index2.html

<!DOCTYPE html> 
<html lang=en>
	<head>
	<style>
	html, body{
	width:100%;
	height:100%;
	margin:0%;
	font-family:"helvetica","verdana","calibri", "san serif";
	overflow:visible;
	padding:0%;
	border:0%;
	}
	 
	</style>
	 		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/>
	
	<title> HTML5 Number Validation Example </title>
	<style>


</style>
	</head>
	<body>
<input type=week name=mon>

	</body>
	</html>

1.5 Numbers

HTML5 has an input type for numbers (numeric values ). Its type is number. An input field of type number only takes numeric values as its input.
Below are some attributes that can be used with input type number or any other input type.

  • max:It is an optional field. This specifies the maximum value for an input field.
  • min: It is an optional field. This specifies the minimum value for an input field.
  • disable: It specifies whether an input field should be enabled. sets whether user interaction with this field is possible.
  • maxlength: It specifies the maximum number of character for an input field.
  • value: This specifies the default value for a field.
  • required: It means this particular field is required.
  • step:It specifies the legal number intervals for an input field.

An example of input type number shows below:

index4.html

<!DOCTYPE html> 
<html lang=en>
	<head>
	<style>
	html, body{
	width:100%;
	height:100%;
	margin:0%;
	font-family:"helvetica","verdana","calibri", "san serif";
	overflow:visible;
	padding:0%;
	border:0%;
	}
	 
	</style>
	 		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/>
	
	<title> HTML5 Number Validation Example </title>
	<style>


</style>
	</head>
	<body>

<input type=number name=mon min=0 max=10 step=10 value=20>
<!-- disabled input field-->
<input type=number name=mon min=0 max=10 step=10 value=20 disabled>
	</body>
	</html>

2. Summary

In this example we learnt about number validation in HTML5. We learnt how it is possible to validate user numeric input in HTML5 without writing unnecessary and tedious JavaScript code.

3. Download the source code

Download
You can download the full source code of this example here: html5numbervalidation

 

Do you want to know how to develop your skillset to become a Web Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

 

1. Building web apps with Node.js

2. HTML5 Programming Cookbook

3. CSS Programming Cookbook

4. AngularJS Programming Cookbook

5. jQuery Programming Cookbook

6. Bootstrap Programming Cookbook

 

and many more ....

 

I have read and agree to the terms & conditions

 

Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments