HTML5 Level II Session III Chapter 10 – How to Work with Forms and Data Validation www.profburnett.com

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 12/1/2018 Copyright © Carl M. Burnett

Forms – Why are they Important?

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.

HTML5 controls for input data Input Type Example Description email <input type="email"> used for input fields that should contain an e-mail 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

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

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)

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.

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

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.

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

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)

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

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

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 10-30-2014 is not. url Must be a full, valid web address like http://www.chia-vet.com. Partial URLs like www.chia-vet.com or chia-vet.com (http://chia-vet. com) are considered invalid. email Must be formatted like an email address: bob@chia-vet.com. This class doesn’t actually check to make sure the email address is real, so someone could still enter nobody@noplace.com and the field would pass validation. number Must be a number like 32 or 102.50 or even –145.5555. 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, 12333 are valid, but 10.33 and –12 are not valid. creditcard Must be a validly formatted credit card number.

Forms with jQuery UI Widgets Date Picker Improved Buttons Autocompletion

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.

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

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.

Setting Select Menu Properties width icons position

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

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.

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

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' }

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

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

Student Exercise 1 Complete Chapter 10-1 Validate with JavaScript exercise on page 305 Create link to your Web4Students Webpage. Preview updated Web4Students Webpage. Post Chapter 10 Exercise and update Web4Students Webpage to Live site.

Student Exercise 2 Complete jQuery UI Form Widget Tutorial. (refer to handout) Create link to your Web4Students Webpage. Preview updated Web4Students Webpage. Post jQuery UI Form Widget Tutorial Exercise and update Web4Students Webpage to Live site.

Class Review 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 Next – Chapter 11 How to use jQuery plugins and jQuery UI Widgets 12/1/2018 Copyright © Carl M. Burnett