HTML and CSS Reference
In-Depth Information
The code shown in Listing 5-7 shows a jQuery
submit()
function that handles the form's
submit
event.
The
submit
event is raised when a form is submitted either using a Submit button or programmatically.
The
submit
event handler function declares a
flag
variable that indicates whether the entered telephone
number matches a certain pattern.
A jQuery attribute selector then selects all the input elements with the
type
attribute set to
tel
. The
jQuery
each()
method checks each matched element against a regular expression, as indicated by the
pattern variable. The regular expression's
test()
method returns
true
if a value specified in the parameter
matches the pattern; otherwise it returns
false
. If the
test()
method returns
false
, an error message is
displayed to the user using an alert box. Setting the
flag
variable to
true
indicates a validation error. The
default action (form submission, in this case) is prevented using the
preventDefault()
method.
Range Selectors
At times, you need to select (rather than enter) values falling within a specific range. Recollect the custom
video player you developed in Chapter 3: you provided the facility to change the player's volume. In such
cases it isn't appropriate to expect the user to enter a volume level. Instead, it's better to let them select a
volume level from a range. The following markup shows how you can use the
range
input type:
<input id="range1" type="range" min="1" max="5" step="1" />
Attributes such as
min
,
max
, and
step
have the same significance as for the
number
input type (
min
and
max
control the control's minimum and maximum allowed values, and
step
controls the jump in the
value). Figure 5-5 shows how the previous range selector is displayed in Chrome.
Figure 5-5.
Range selector in Chrome
The resulting range selector has a minimum value of 1, a maximum value of 5, and a step of 1.
Dates and Times
Another commonly used data type in web applications is date and/or time. In ASP.NET Web Forms, the
Calendar
server control lets you pick dates. However, the biggest downside of
Calendar
is that it requires a
post back when a date is selected. No wonder ASP.NET developers often used JavaScript-based pop-up
date-time pickers in their web applications. It would be better if the browser itself could display a date-
time picker, and that's where the
date
and
time
input types come into the picture. Using these input types,
you can select a date, a time, or both. The user can also select a complete week or month rather than a
specific day or time.
