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) {
Search WWH ::

Custom Search