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}
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.
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
Top Related