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
