Scribd
Upload
5 views12 pages

18 EventsValidation

Uploaded by

geromsaid889
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views12 pages

18 EventsValidation

Uploaded by

geromsaid889
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

1 More Events and Validation

CS380
Page/window events
2

name description
load the browser loads the page
unload the browser exits the page
resize the browser window is resized
the user right-clicks to pop up a
contextmenu
context menu
an error occurs when loading a
error
document or an image

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

event name description


submit form is being submitted
reset form is being reset
the text or state of a form
change
control has changed
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 JavaScript
8

 string.match(regex)
 ifstring 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
Mxxxxxxxxxxx"
Keyboard/text events
10
name description
user presses a key while this
keydown
element has keyboard focus
user releases a key while this
keyup
element has keyboard focus
user presses and releases a key
keypress while this element has keyboard
focus
this element gains keyboard
focus
focus
this element loses keyboard
blur
focus
this element's text is selected or
select
Key event objects
11

property name description


ASCII integer value of key that was
pressed
keyCode
(convert to char with
rototype's key code constants
String.fromCharCode)
altKey, ctrlKey, shiftKey true if Alt/Ctrl/Shift key is being held

CS380
Key event objects
12

Event.KEY_BACKSPACE Event.KEY_DELETE Event.KEY_DOWN Event.KEY_END


Event.KEY_PAGEDOW
Event.KEY_ESC Event.KEY_HOME Event.KEY_LEFT
N
Event.KEY_PAGEUP Event.KEY_RETURN Event.KEY_RIGHT Event.KEY_TAB
Event.KEY_UP

 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 page
body, outer element, etc.
CS380

You might also like