Modern JavaScript Develop And Design Instructor’s Notes Chapter 10 – Working with Forms Modern JavaScript Design And Develop Copyright © 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 Messages function 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 Tooltips showTooltip: 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()

Metacharacters CharacterMeaning \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 CharacterMeaning ?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 ClassShortcutMeaning [0-9]\dAny digit [\f\r\t\n\v]\sAny white space [A-Za-z0-9]\wAny word character [^0-9]\DNot a digit [^\f\r\t\n\v]\SNot white space [^A-Za-z0-9]\WNot a word character