Web Programming Step by Step

Lecture 17
Client-Side Validation

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

Page/window events (9.2.5)

• The above can be handled on the window object. An alternative to window.onload:

window.onload = function() { ... };
document.observe("dom:loaded", function() {
	// attach event handlers, etc.
});

Keyboard/text events (9.2.3)

• focus: the attention of the user's keyboard (given to one element at a time)

Key event objects

• 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.

Form events (9.1.6, 9.2.4)

• Prototype adds the following methods to form controls' DOM objects:

Prototype form shortcuts (9.1.6)

$F("formID")["name"]

• gets parameter with given name from form with given id

$F("controlID")

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

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

Stopping an event

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

window.onload = function() {
	$("exampleform").observe("submit", checkData);
};

function checkData(event) {
	if ($F("city") == "" || $F("state").length != 2) {
		alert("Error, invalid city/state.");  // show error message 
		event.stop();
		return false;
	}
}

• to abort a form submit or other event, call Prototype's stop method 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", ...