Web Programming Step by Step

Lecture 18
More Events and Validation

Reading: 9.2 - 9.3

Except where otherwise noted, the contents of this presentation are Copyright 2009 Marty Stepp and Jessica Miller.

Page/window events (9.2.5)

• The above events can be handled on the global window object. Also:

// best way to attach event handlers on page load
window.onload = function() { ... };
document.observe("dom:loaded", function() {
	$("orderform").observe("submit", verify);
});

Form events (9.2.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
}

Prototype and forms (9.1.6)

$("id")["name"]

• gets parameter with given name from form with given id

$F("id")

• $F returns the value of a form control with the given id

  var name = $F("username");
  if (name.length < 4) {
  	$("username").clear();
  	$("login").disable();
  }
  

• other form control methods:

Client-side validation code

<form id="exampleform" action="http://foo.com/foo.php">

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 
	}
}

• forms expose onsubmit and onreset events
• to abort a form submission, call Prototype's Event.stop on the event

Regular expressions in 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(/Marty/i) will match "marty", "MaRtY", ...