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.
Search WWH ::

Custom Search