1 More Events and Validation
CS380
Page/window events
2
CS380
Page/window events
3
// best way to attach event handlers on page load
window.onload = function() { ... };
document.observe("dom:loaded", function() {
$("orderform").observe("submit", verify);
});
JS
CS380
Form events
4
window.observe("load", function() {
$("orderform").observe("submit", verify);
});
function verify(event) {
if ($("zipcode").value.length < 5) {
event.stop(); // cancel form submission
unless
} // zip code is 5 chars long
}
CS380 JS
Prototype and forms
5
$("id")["name"] JS
gets parameter with given name from form
with given id
$F("id") JS
$F returns the value of a form control with the
given id
var name = $F("username");
if (name.length < 4) {
$("username").clear();
$("login").disable();
} JS
CS380
Prototype and forms
6
other form control methods:
activate clear disable enable
focus getValue present select
CS380
Client-side validation code
7
<form id="exampleform" action="http://foo.com/foo.php">
HTML
window.onload = function() {
$("exampleform").onsubmit = checkData;
};
function checkData(event) {
if ($("city").value == "" ||
$("state").value.length != 2) {
Event.stop(event);
alert("Error, invalid city/state."); // show
error message
}
} JS
forms expose onsubmit and onreset events
to abort a form submission, call Prototype's
Event.stop on the event
Regular expressions in
8
JavaScript
string.match(regex)
if string fits the pattern, returns the matching text;
else returns null
can be used as a Boolean truthy/falsey test:
var name = $("name").value;
if (name.match(/[a-z]+/)) { ... }
an i can be placed after the regex for a case-
insensitive match
name.match(/Xenia/i) will match “xenia", “XeNiA",
...
CS380
Replacing text with regular
9
expressions
string.replace(regex, "text")
replaces the first occurrence of given pattern with
the given text
var str = “Xenia Mountrouidou";
str.replace(/[a-z]/, "x") returns " Xxnia
Mountrouidou"
returns the modified string as its result; must be
stored
str = str.replace(/[a-z]/, "x")
a g can be placed after the regex for a global
match (replace all occurrences)
str.replace(/[a-z]/g, "x") returns “Xxxxx
Keyboard/text events
10
Key event objects
11
rototype's key code constants
CS380
Key event objects
12
issue: if the event you attach your listener to
doesn't have the focus, you won't hear the
event
possible solution: attach key listener to entire
CS380
page body, outer element, etc.
