HTML and CSS Reference
In-Depth Information
Figure 5-4.
The
number
input type with min and max attributes specified
In addition to specifying the
type
attribute as
number
, you can also specify a minimum value, a
maximum value, and a
step
value. The minimum and maximum values the control should accept are
specified by the
min
and
max
attributes, respectively. The
step
attribute indicates a jump in the number
when the number is incremented or decremented. The following markup shows how to use these three
attributes to restrict a user's age to a range from 18 to 100:
<input type="number" min="18" max="100" step="2" />
Figure 5-4 shows the error message that's displayed if you try to exceed the maximum value.
By default, using the
number
input type allows you to enter only integers. If you wish to enter decimals,
you need to specify an appropriate
step
value as follows:
<input type="number" min="10" max="50" step="0.5" />
n
Note
The
min
,
max
, and
step
attributes work with these input types:
number
,
range
,
date
,
datetime
,
datetime-local
,
month
,
time
, and
week
.
To mark an input field as a telephone number, you use the
tel
type. But currently, browsers don't
impose any special validations on the
tel
input type, and hence it acts more like a marker. You can use this
information to perform custom JavaScript validations. Listing 5-7 shows how.
Listing 5-7.
Custom Validation for the
tel
Input Type
$("#form1").submit(function (e) {
var flag = false;
$("input[type='tel']").each(function (i,v) {
var pattern = /^(\([0-9]{3}\)|[0-9]{3}-)[0-9]{3}-[0-9]{4}$/;
var value = $(this).val();
if (!pattern.test(value)) {
alert("Telephone no. is invalid!");
flag = true;
}
});
if (flag) {
e.preventDefault();
}
});
