| home / programming / javascript / jf / column9 / 1 |   [previous] |
|
|
|
Our JavaScript now can be updated to check for letters only if “letOnly” is one of the classes of the current input field in the loop, or check for numbers only if “numOnly” is one of the classes of the current input field in the loop.
<script type="text/javascript"><!--
function validateForm(f){
var regex = /^\s*$/;
var let = /^[a-zA-Z]+$/i;
var num = /^[0-9]+$/;
var e = f.elements;
for(var i=0; i<e.length; i++){
if(regex.test(e[i].value)){
alert("Please
fill in all fields.");
e[i].focus();
return false;
}
if(e[i].className.indexOf("letOnly")!=-1
&& !let.test(e[i].value)){
alert("Please
enter letters only.");
e[i].focus();
return false;
}
if(e[i].className.indexOf("numOnly")!=-1
&& !num.test(e[i].value)){
alert("Please enter
numbers only.");
e[i].focus();
return false;
}
}
return true;
}
//--></script>
This script tests for the class names “letOnly” and “numOnly”; if either is present, it will validate and only allow letters or numbers. Most often, this type of validation is sufficient and effective.
JavaScript image rollovers are a classical issue – there have been many methods available to accomplish rollovers, but I think I’ve found what is likely to be the best. To begin with, you will preload your images with the “on” and “off” equivalents.
<script type="text/javascript"><!--
var img1 = [], img2 = [];
img1[0] = new Image(); img1[0].src = "http://localhost/html.gif";
img1[1] = new Image(); img1[1].src= "http://localhost/html.jpg";
img2[0] = new Image(); img2[0].src = "http://localhost/gif.gif";
img2[1] = new Image(); img2[1].src= "http://localhost/jpg.gif";
function roll(n,s){
document.images[n].src = window[n][s].src;
}
//--></script>
<img src="/html.gif" onmouseover="roll(this.name,1)"
onmouseout="roll(this.name,0)" name="img1"><br>
<img src="/gif.gif" onmouseover="roll(this.name,1)" onmouseout="roll(this.name,0)"
name="img2">
You will need to change the addresses on your own (be aware that these are from a local testing server). Start by deciding how rollovers you want to use for your images. In my case, there are two, so I create two new arrays, named “img1” and “img2” respectively. You can name your array variables anything you want and you don’t have to add numbers after them. Make sure, though, that your variable names and the names of your images are the same.
An explanation of the “roll” function: two values are passed to the “n” and “s” variables of this function. They are the name of the image and the state in which the image should be at this point. That is, when you put your mouse over the image, you give the name of the image (you can also just put “this.name” if the roll function is directly on the image) and whether you want the image to be in its original state (0) or its “over” state (1). The roll function will search for “document.images[n]” – that is, the image with the name “n” on the current web page – and change its SRC to “window[n][s].src,” or the sth index of the array that has the same name as the image you rolled over. This could also be written as eval(“n[s].src”); but it’s preferable to avoid using eval.
Let’s quickly run through our list from earlier:
Following the above list, we met our criteria for the responsible use of JavaScript,
but when an alternate technology is available, why not take advantage of it?
Using Cascading
Style Sheets, you can preload your rollovers. This will work for users who
have JavaScript disabled, but have a browser with decent CSS support.
Next week, we conclude this series, beginning with Drop-down Navigation Selections. Other topics covered will be DHTML Menus, Proprietary Alternatives, Document.all, and innerHTML. See you then.
Jonathan Fenocchi is a Web developer who primarily works in the fields of Web Design, client-side scripting, and PHP scripting. His web site is located at: www.cmmwebdesign.com
| home / programming / javascript / jf / column9 / 1 | [previous] |
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers
URL: http://webreference.com/programming/javascript/Jf/column9/1
