Modern JavaScriptDevelop And Design

Instructor’s NotesChapter 10 – Working with Forms

Modern JavaScript Design And DevelopCopyright © 2012 by Larry Ullman

Objectives

• Properly work with HTML forms using JavaScript

• Create inline errors as part of form validation

• Create tooltips• Disable the submit button upon

the form’s submission

More Objectives

• Perform common JavaScript interactions with standard form elements

• Generate dynamically linked select menus

• Write regular expression patterns• Test regular expressions using

different methods

Handling Forms Recap

• Add submit handler to form itself• Always have a submit button• Always use valid action attribute• HTML5 supports browser-based

form validation

Creating Error Messagesfunction addErrorMessage(id, msg) { 'use strict'; var elem = document.getElementById(id); // Define the new span's ID value: var newId = id + 'Error'; // Check for the existence of the span: var span = document.getElementById(newId); if (span) { span.firstChild.value = msg; // Update } else { // Create new. // Create the span: span = document.createElement('span'); span.id = newId; span.className = 'error' span.appendChild(document.createTextNode(msg)); // Add the span to the parent: elem.parentNode.appendChild(span); elem.previousSibling.className = 'error';

} // End of main IF-ELSE.

} // End of addErrorMessage() function.

Creating TooltipsshowTooltip: function(e) { 'use strict';

// Get the event object: if (typeof e == 'undefined') var e = window.event;

// Get the event target: var target = e.target || e.srcElement; target.previousSibling.lastChild.style.visibility = 'visible';

}, // End of showTooltip() function.

Disabling the Submit Button

document.getElementById('submitButton').disabled = 'disabled';document.getElementById('submitButton').disabled = true;

Getting Values

var data = document.getElementById('comments').value;

var data = document.getElementById('selectMenu').value;

var data = document.getElementById('selectMenu').selectedIndex = 3;

for (var i = 0, count = elem.options.length; i < count; i++) { // Use elem.options[i].selected/value/text}

Linked Lists

Checkboxes and Radio Buttons

var which = document.getElementById('someCheckbox').checked;if (which.checked) { var value = document.getElementById('someCheckbox').value;}

Regular Expressions

• A way to test strings against patterns.

• Complicated!• Represented by RegExp objects.

Creating RegExp

var regexp = /pattern/;

var regexp = /pattern/modifier;

Regex Functions

• test() • exec()• search()• match()

MetacharactersCharacter

Meaning

\ Escape

^ Indicates the beginning of the string

$ Indicates the end of the string

. Any single character except newline

| Alternatives (or)

[ Start of a class

] End of a class

( Start of a subpattern

) End of a subpattern

{ Start of a quantifier

} End of a quantifer

Quantifiers

Character

Meaning

? 0 or 1

* 0 or more

+ 1 or more

{x} Exactly x occurrences

{x,y} Between x and y (inclusive)

{x,} At least x occurrences

Character Classes

Class Shortcut

Meaning

[0-9] \d Any digit

[\f\r\t\n\v] \s Any white space

[A-Za-z0-9] \w Any word character

[^0-9] \D Not a digit

[^\f\r\t\n\v] \S Not white space

[^A-Za-z0-9]

\W Not a word character