<!--#include virtual="commontop.html" -->
<title>Web Programming Step by Step, Lecture 17: Client-Side Validation</title>
</head>
<body>
<div class="layout">
<div id="controls"><!-- DO NOT EDIT --></div>
<div id="currentSlide"><!-- DO NOT EDIT --></div>
<div id="header"></div>
<div id="footer">
<h1><em>Web Programming Step by Step</em>, Lecture 17</h1>
<h2>Client-Side Validation</h2>
</div>
</div>
<div class="presentation">
<div class="slide">
<h1><a href="http://www.webstepbook.com/">Web Programming Step by Step</a></h1>
<h3>Lecture 17 <br /> Client-Side Validation</h3>
<p class="license">
Except where otherwise noted, the contents of this presentation are Copyright 2010 Marty Stepp and Jessica Miller.
</p>
<div class="w3c">
<a href="http://validator.w3.org/check/referer"><img src="images/w3c-xhtml11.png" alt="Valid XHTML 1.1" /></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="images/w3c-css.png" alt="Valid CSS!" /></a>
</div>
</div>
<div class="slide">
<h1>
Page/window events
<span class="readingsection">(9.2.5)</span>
</h1>
<table class="standard">
<tr>
<th>name</th><th>description</th>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/jsref/jsref_onload.asp">load</a></code>,
<code><a href="http://www.w3schools.com/jsref/jsref_onunload.asp">unload</a></code>
</td>
<td>
the browser loads/exits the page
</td>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/jsref/jsref_onresize.asp">resize</a></code>
</td>
<td>
the browser window is resized
</td>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/jsref/jsref_onerror.asp">error</a></code>
</td>
<td>
an error occurs when loading a document or an image
</td>
</tr>
<tr>
<td>
<code>contextmenu</code>
</td>
<td>
the user right-clicks to pop up a context menu
</td>
</tr>
</table>
<ul>
<li>
The above can be handled on the <code>window</code> object. An alternative to <code>window.onload</code>:
</li>
</ul>
<pre class="examplecode js">
<del>window.onload = function() { ... };</del>
<em>document.observe("dom:loaded"</em>, function() {
<span class="comment">// attach event handlers, etc.</span>
});
</pre>
</div>
<div class="slide">
<h1>
Keyboard/text events
<span class="readingsection">(9.2.3)</span>
</h1>
<table class="standard">
<tr>
<th>name</th>
<th>description</th>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/jsref/jsref_onkeydown.asp">keydown</a></code>
</td>
<td>
user presses a key while this element has keyboard focus
</td>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/jsref/jsref_onkeyup.asp">keyup</a></code>
</td>
<td>
user releases a key while this element has keyboard focus
</td>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/jsref/jsref_onkeypress.asp">keypress</a></code>
</td>
<td>
user presses and releases a key while this element has keyboard focus
</td>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/jsref/jsref_onfocus.asp">focus</a></code>
</td>
<td>
this element gains keyboard focus
</td>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/jsref/jsref_onblur.asp">blur</a></code>
</td>
<td>
this element loses keyboard focus
</td>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/jsref/jsref_onselect.asp">select</a></code>
</td>
<td>
this element's text is selected or deselected)
</td>
</tr>
</table>
<ul>
<li>
<span class="term">focus</span>: the attention of the user's keyboard (given to one element at a time)</li>
</li>
</ul>
</div>
<div class="slide">
<h1>Key event objects</h1>
<table class="standard">
<tr>
<th>
property name
</th>
<th>
description
</th>
</tr>
<tr>
<td>
<code>keyCode</code>
</td>
<td>
ASCII integer value of key that was pressed <br />
(convert to char with <a href="http://www.quirksmode.org/js/keys.html"><code>String.fromCharCode</code></a>)
</td>
</tr>
<tr>
<td>
<code>altKey</code>, <code>ctrlKey</code>, <code>shiftKey</code>
</td>
<td>
<code>true</code> if Alt/Ctrl/Shift key is being held
</td>
</tr>
</table>
<table class="standard" style="font-size: smaller">
<caption>Prototype's key code constants</caption>
<tr>
<td>
<code>Event.KEY_BACKSPACE</code>
</td>
<td>
<code>Event.KEY_DELETE</code>
</td>
<td>
<code>Event.KEY_DOWN</code>
</td>
<td>
<code>Event.KEY_END</code>
</td>
</tr>
<tr>
<td>
<code>Event.KEY_ESC</code>
</td>
<td>
<code>Event.KEY_HOME</code>
</td>
<td>
<code>Event.KEY_LEFT</code>
</td>
<td>
<code>Event.KEY_PAGEDOWN</code>
</td>
</tr>
<tr>
<td>
<code>Event.KEY_PAGEUP</code>
</td>
<td>
<code>Event.KEY_RETURN</code>
</td>
<td>
<code>Event.KEY_RIGHT</code>
</td>
<td>
<code>Event.KEY_TAB</code>
</td>
</tr>
<tr>
<td>
<code>Event.KEY_UP</code>
</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<ul>
<li>
issue: if the event you attach your listener to doesn't have the focus, you won't hear the event
<ul>
<li>
possible solution: attach key listener to entire page body, outer element, etc.
</li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>
Form events
<span class="readingsection">(9.1.6, 9.2.4)</span>
</h1>
<table class="standard">
<tr>
<th>
event name
</th>
<th>
description
</th>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/jsref/jsref_onsubmit.asp">submit</a></code>
</td>
<td>
form is being submitted
</td>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/jsref/jsref_onreset.asp">reset</a></code>
</td>
<td>
form is being reset
</td>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/jsref/jsref_onchange.asp">change</a></code>
</td>
<td>
the text or state of a form control has changed
</td>
</tr>
<!--
<li><code><a href="http://www.w3schools.com/jsref/jsref_onabort.asp">onabort</a></code> : the loading of an image is aborted</li>
-->
</table>
<ul>
<li>
Prototype adds the following methods to form controls' DOM objects:
</li>
</ul>
<table class="standard">
<tr>
<td><a class="popup" href="http://www.prototypejs.org/api/form/element/activate"><code>activate</code></a></td>
<td><a class="popup" href="http://www.prototypejs.org/api/form/element/clear"><code>clear</code></a></td>
<td><a class="popup" href="http://www.prototypejs.org/api/form/element/disable"><code>disable</code></a></td>
<td><a class="popup" href="http://www.prototypejs.org/api/form/element/enable"><code>enable</code></a></td>
</tr>
<tr>
<td><a class="popup" href="http://www.prototypejs.org/api/form/element/focus"><code>focus</code></a></td>
<td><a class="popup" href="http://www.prototypejs.org/api/form/element/getValue"><code>getValue</code></a></td>
<td><a class="popup" href="http://www.prototypejs.org/api/form/element/present"><code>present</code></a></td>
<td><a class="popup" href="http://www.prototypejs.org/api/form/element/select"><code>select</code></a></td>
</tr>
</table>
</div>
<div class="slide">
<h1>
Prototype form shortcuts
<span class="readingsection">(9.1.6)</span>
</h1>
<pre class="syntaxtemplate js">
$F("<var>formID</var>")["<var>name</var>"]
</pre>
<ul style="margin-bottom: 1em">
<li>
gets parameter with given <strong>name</strong> from form with given <strong>id</strong>
</li>
</ul>
<pre class="syntaxtemplate js">
<em>$F</em>("<var>controlID</var>")
</pre>
<ul>
<li>
<a class="popup" href="http://www.prototypejs.org/api/utility/dollar-f"><code>$F</code> function</a> returns the <strong>value</strong> of a form control with the given <strong>id</strong>
<pre class="examplecode js">
if (<em>$F("username")</em>.length < 4) {
$("username").<em>clear</em>();
$("login").<em>disable</em>();
}
</pre>
</li>
</ul>
</div>
<div class="slide">
<h1>Stopping an event</h1>
<pre class="examplecode html">
<form <em>id="exampleform"</em> action="http://foo.com/foo.php">...</form>
</pre>
<pre class="examplecode js">
window.onload = function() {
$("exampleform").observe(<em>"submit"</em>, checkData);
};
function checkData(<em>event</em>) {
if ($F("city") == "" || $F("state").length != 2) {
alert("Error, invalid city/state."); <span class="comment">// show error message</span>
<em>event.stop();</em>
<em>return false;</em>
}
}
</pre>
<ul>
<li>to abort a form submit or other event, call Prototype's <a href="http://www.prototypejs.org/api/event/stop"><code>stop</code></a> method on the event</li>
</ul>
</div>
<div class="slide">
<h1>Regular expressions in JavaScript</h1>
<ul>
<li><code><var>string</var>.match(<var>regex</var>)
<ul>
<li>if string fits the pattern, returns the matching text; else returns <code>null</code></li>
<li>can be used as a Boolean truthy/falsey test:<br />
<code>var name = $("name").value;<br />if (name.match(<em>/[a-z]+/</em>)) { ... }</code></li>
</ul>
</li>
<li>an <code>i</code> can be placed after the regex for a case-insensitive match
<ul>
<li><code>name.match(/Marty/i)</code> will match <code>"marty"</code>, <code>"MaRtY"</code>, ...</li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>Replacing text with regular expressions</h1>
<ul>
<li><code><var>string</var>.replace(<var>regex</var>, "<var>text</var>")
<ul>
<li>replaces the <strong>first</strong> occurrence of given pattern with the given text
<code>var str = "Marty Stepp";</code><br />
<code>str.replace(/[aeiou]/, "*")</code> returns <code>"M<em>*</em>rty St<em>e</em>pp"</code>
</li>
</ul>
</li>
<li>a <code>g</code> can be placed after the regex for a global match (replace <strong>all</strong> occurrences)
<ul>
<li><code>str.replace(/[aeiou]/<em>g</em>, "*")</code> returns <code>"M<em>x</em>rty St<em>x</em>pp"</code></li>
</ul>
</li>
<li>does not modify the string itself; returns the modified string as its result<br />
<pre><code>str.replace(/[aeiou]/g, "*"); <span class="comment">// str still "Marty Stepp" !</span>
<em>str = </em>str.replace(/[aeiou]/g, "*"); <span class="comment">// str now "M*rty St*pp"</span></code></pre>
</li>
<li>remove disallowed characters ("filter") by replacing with empty string
<ul>
<li><code>str = str.replace(/[^A-Z]+/<em>g</em>, <em>""</em>)</code> turns <code>str</code> into <code>"MS"</code></li>
</ul>
</li>
</ul>
</div>
<!--#include virtual="commonbottom.html" -->