Presentation is loading. Please wait.

Presentation is loading. Please wait.

Session III Chapter 10 – How to Work with Forms and Data Validation

Similar presentations


Presentation on theme: "Session III Chapter 10 – How to Work with Forms and Data Validation"— Presentation transcript:

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.


Download ppt "Session III Chapter 10 – How to Work with Forms and Data Validation"

Similar presentations


Ads by Google