Scribd
Upload
15 views

18 EventsValidation

Uploaded by

Arslan Coskun
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
15 views

18 EventsValidation

Uploaded by

Arslan Coskun
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

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.

You might also like