1. Session III Chapter 10 – How to Work with Forms and Data Validation
jQuery
Session III
Chapter 10 – How to Work with Forms and Data Validation
Master a Skill / Learn for Life

2. Class Outline Forms and Form Controls jQuery Form Selectors
jQuery Event Methods for Forms
jQuery Form Validation
jQuery Date Picker
jQuery Improved Buttons
jQuery Autocompletion
jQuery Form Builder
5/23/2019
Copyright © Carl M. Burnett

3. Forms – Why are they Important?

4. Form Element Attributes
Description
name
A name the can be referred to by client-side or server-side code.
action
The URL of the file that will process the data in the form.
method
Specifies the HTTP method (GET or POST) to be used when submitting the form data. “get” is default.

5. HTML5 controls for input data
Input Type
Example
Description
<input type=" ">
used for input fields that should contain an address
url
<input type="url">
used for input fields that should contain a URL address
tel
<input type="tel">
used for input fields that should contain a telephone number.
number
<input type="number">
defines a numeric input field
date
<input type="date">
used for input fields that should contain a date
time
<input type="time">
allows the user to select a time (no time zone)
color
<input type="color">
used for input fields that should contain a color

6. HTML5 controls for input data
Input Type
Example
Description
datetime-local
<input type="datetime-local">
specifies a date and time input field, with no time zone
month
<input type="month">
allows the user to select a month and year.
search
<input type="search">
used for search fields (a search field behaves like a regular text field).
week
<input type="week">
allows the user to select a week and year.
range
<input type="range">
defines a control for entering a number whose exact value is not important (like a slider control). Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the min, max, and step attributes

7. The basic HTML5 attributes for working with forms
Description
autofocus
specifies that the input field should automatically get focus when the page loads.
placeholder
specifies a hint that describes the expected value of an input field (a sample value or a short description of the format)

8. The HTML5 attributes for data validation
Tag
Description
autocomplete
<input>
specifies whether a form or input field should have autocomplete on or off.
pattern (regexp)
specifies a regular expression that the <input> element's value is checked against.
title
required
specifies that an input field must be filled out before submitting the form
novalidate
<form>
specifies that the form data should not be validated when submitted.

9. CSS3 pseudo-classes selectors
Example
Description
:required
input:required
Selects input elements with the "required" attribute specified
:valid
input:valid
Selects all input elements with a valid value
:invalid
input:invalid
Selects all input elements with an invalid value

10. jQuery Form Selectors Selector Example Description :input $(':input')
Selects all input, textarea, select, and button elements. In other words, it selects all form elements.
:text
$(':text')
Selects all text fields.
:password
$(':password')
Selects all password fields.
:radio
$(':radio')
Selects all radio buttons.
:checkbox
$(':checkbox')
Selects all checkboxes.
:submit
$(':submit')
Selects all submit buttons.
:image
$(':image')
Selects all image buttons.
:reset
$(':reset')
Selects all reset buttons.

11. jQuery Form Selectors jQuery Selector Tester Selector Example
Description
:button
$(':button')
Selects all fields with type button.
:file
$(':file')
Selects all file fields (used for uploading a file).
:hidden
$(':hidden')
Selects all hidden fields.
:enabled
$(':enabled')
Selects all enabled input elements
:checked
$(':checked')
Selects all checked input elements
:selected
$(':selected')
Selects all selected input elements
jQuery Selector Tester

12. The jQuery methods for getting, setting, and trimming control values
Description
val()
Gets the value attribute of the selected elements (for form elements)
val(value)
Sets the value attribute of the selected elements (for form elements)
trim()
Removes all the spaces as the start and end of the string (for form elements)

13. The jQuery methods for triggering events
Description
focus()
Moves the focus to the selected element and triggers the focus event
blur()
Removes the focus to the selected element and triggers the blur event
change()
Triggers the change event
select()
Triggers the select event
submit()
Triggers the submit event for a form

14. The jQuery event methods for forms
Description
focus(handler)
The handler runs when the focus moves to the selected element
blur(handler)
The handler runs when the focus leaves the selected element
change(handler)
The handler runs when the value in the selected element is changed
select(handler)
The handler runs when the user selects text in a text or text area box
submit(handler)
The handler runs when the a submit button is clicked in a form

15. jQuery Form Validation Rules
Description
required
The field won’t be submitted unless this field is filled out, checked, or selected.
date
Information must be in the format MM/DD/YYYY. For example, 10/30/2014 is considered valid, but is not.
url
Must be a full, valid web address like Partial URLs like or chia-vet.com ( com) are considered invalid.
Must be formatted like an address: This class doesn’t actually check to make sure the address is real, so someone could still enter and the field would pass validation.
number
Must be a number like 32 or or even – However, the input can’t include any symbols, so $45.00 and 100,000 are invalid.
digits
Can only include positive integers. So 1, 20, are valid, but and –12 are not valid.
creditcard
Must be a validly formatted credit card number.

16. Forms with jQuery UI Widgets
Date Picker
Improved Buttons
Autocompletion

17. Picking Dates with Style
Attach jQuery UI’s CSS and JavaScript files to your web page.
Add a form to a page, and include a text <input> field for capturing a date.
Add jQuery’s $(document).ready() function to your page
Use jQuery to select the input element(s) and call the datepicker() function.

18. Setting Date Picker Properties
changeMonth
changeYear
dateFormat
monthNames
numberOfMonths
maxDate
minDate
yearRange
Basic Example

19. Stylish Select Menus
Attach jQuery UI’s CSS and JavaScript files to your web page.
Add a form to a page, and include a text <input> field for capturing a date.
Add jQuery’s $(document).ready() function to your page
Use jQuery to select the menu and call the selectmenu() function:
Pass an object literal to the selectmenu() function with a width property.

20. Setting Select Menu Properties
width
icons
position

21. Styling Buttons
Attach jQuery UI’s CSS and JavaScript files to your web page.
Add a button to the page. It can be either a reset, submit, or input button or <button> element.
Add jQuery’s $(document).ready() function to your page
Use jQuery to select the button and call the button function
Customizing Buttons
Stylized
Form

22. Providing Hints with Autocomplete
Attach jQuery UI’s CSS and JavaScript files to your web page.
Add a form to the page, and include a text input field
Add jQuery’s $(document).ready() function to your page
Use jQuery to select the text field and call the autocomplete function.

23. Using Arrays for Autocomplete
var airports = [ 'Aberdeen Regional Airport, Aberdeen, South Dakota', 'Abilene Regional Airport, Abilene, Texas’, 'Abraham Lincoln Capital Airport, Springfield, Illinois’, 'Adak Airport, Adak Island, Alaska’, 'Adirondack Regional Airport, Saranca Lake, New York’ ]; // lots more airports would go in here

24. Using Separate Labels and Values
var airports = [ { label : 'Aberdeen Regional Airport, Aberdeen, South Dakota', value : 'ABR' }, label : 'Abilene Regional Airport, Abilene, Texas', value : 'ABI' { label : 'Abraham Lincoln Capital Airport, Springfield, Illinois', value : 'SPI' label : 'Adak Airport, Adak Island, Alaska', value : 'ADK' label : 'Adirondack Regional Airport, Saranca Lake, New York', value : 'SLK' }

25. Getting Autocomplete Data from the Server
A visitor begins typing into a text field.
The visitor’s input is sent to the server.
Using Ajax, the browser sends data to the server and waits for a response. In this case, the browser sends the text the visitor has typed so far.
The server sends back an array of terms that match what the visitor has typed so far.
The server provides a list of matching terms. Usually, this is accomplished using server-side programming that searches a database, gets results, and formats those results into an array that’s sent back to the browser.
The list of matching terms appears in the autocomplete menu.
Autocomplete
Form

26. Form Validation Example
jQuery UI Form Widget

27. jQuery Form https://www.jqueryform.com/ jQuery Form Builder
12 Form Validation
Date Picker
Picture Choice
Form Logic
Google Friendly
Personalized Messages

28. Student Exercise 1
Complete Chapter 10-1 Validate with JavaScript exercise on page 305
Students will upload test files to development site.
Students will preview in browser development files.
Students will upload files to live site.
Students will preview in browser live files.

29. Student Exercise 2
Complete jQuery UI Form Widget Tutorial. (refer to handout)
Students will upload test files to development site.
Students will preview in browser development files.
Students will upload files to live site.
Students will preview in browser live files.