Random Thoughts: 02/01/2005

Thursday, February 17, 2005

Limiting Characters entered in an html text field Part 2

This is another version of the checkKey() method in the previous posting. It is also usable on IE or Netscape. This function goes about comparing the current key to a string of allowed characters. If it is allowed, it returns true. Otherwise, it returns false. This function is allowing a-z, A-Z, 0-9, -, *, and a space. (Also the Home, End, Delete, and Arrow Keys.)

<script type="text/javascript">
function isValidKey(pEvent)
{
var key;
var keychar;
var lAllowedChars = "abcdefghijklmnopqrstuvwxyz0123456789-*' ";

if (window.event)
key = window.event.keyCode;
else if (pEvent)
key = pEvent.which;
else
return true;

keychar = String.fromCharCode(key).toLowerCase();

// control keys
if ((key==null) (key==0) (key==8)
(key==9) (key==13) (key==27))
return true;

// alphas, numbers, and allow characters
else if (((lAllowedChars).indexOf(keychar) > -1))
return true;
else
return false;
}
</script>

Limiting Characters entered in an html text field Part 1

This script allows numeric, & decimal. You also have to filter out the Home, End, & Arrow keys so they can be used. When you call the function, you must be sure to pass the event. The event to call when filtering keys is the onkeypress event. Notice that the function returns a true or false; and the onkeypress event in the html returns this value so that the body knows whether to allow the key or not. This function filters on IE or Netscape. The "evt.which" statement is the Netscape equivalent to IE's "evt.keyCode."

This is the script that should go in your <head></head>:

<script type="text/javascript">
//Allows only 0-9 & .(decimal)
//The Home, End, & Arrow Keys had to be filtered as well
function checkKey(evt)
{
evt = (evt) ? evt : event;
var charCode = (evt.charCode) ? evt.charCode : ((evt.keyCode) ? evt.keyCode : ((evt.which) ? evt.which : 0));
if (evt.shiftKey)
{
return false;
}
if (charCode > 31 && (charCode < 48 charCode > 57))
{
if (charCode == 110 charCode == 190 charCode == 46 (charCode >= 35 && charCode <= 39))
{/*Do nothing...we want these characters allowed.*/}
else if (charCode < 96 charCode > 106)
{
return false;
}
}
return true;
}
</script>

This is an example of the html that should go in your <body></body>:

<body>
<input type="text" onkeypress="return checkKey(event);" id="number"/>
</body>

NOTE: The JavaScript used above uses the single line if-statement. Please see my posting about the single line if-statement for an explanation on how to use this.

Accessing an Access Db using JavaScript

<SCRIPT LANGUAGE="javascript">
var conn = new ActiveXObject("ADODB.Connection");
var connectionstring = "Provider=Microsoft.Jet.OLEDB.4.0; Data Source=c:/sabe/Sabe.mdb; Persist Security Info=False";

conn.Open(connectionstring);

var rs = new ActiveXObject("ADODB.Recordset");

rs.Open("SELECT [itemname] FROM item", conn);

while(!rs.eof)
{
alert(rs(0));
rs.movenext;
}

rs.close;
conn.close;
</SCRIPT>

Thursday, February 10, 2005

Date Validation with JavaScript

This is a small bit of html to show you how you can use JavaScript to validate dates. This is also leap year compliant.

<html>
<head>
<script type="text/javascript">
function isValidDate(dateStr)
{
if (dateStr == "MM/DD/YYYY")
{
return false;
}

// dateStr must be of format month day year with either slashes
// or dashes separating the parts. Some minor changes would have
// to be made to use day month year or another format.
// This function returns True if the date is valid.
var slash1 = dateStr.indexOf("/");

if (slash1 == -1)
{
slash1 = dateStr.indexOf("-");
}

// if no slashes or dashes, invalid date
if (slash1 == -1)
{
return false;
}

var dateMonth = dateStr.substring(0, slash1)
var dateMonthAndYear = dateStr.substring(slash1+1, dateStr.length);
var slash2 = dateMonthAndYear.indexOf("/");

if (slash2 == -1)
{
slash2 = dateMonthAndYear.indexOf("-");
}

// if not a second slash or dash, invalid date
if (slash2 == -1)
{
return false;
}

var dateDay = dateMonthAndYear.substring(0, slash2);
var dateYear = dateMonthAndYear.substring(slash2+1, dateMonthAndYear.length);

if ( (dateMonth == "") (dateDay == "") (dateYear == "") )
{
return false;
}

// if any non-digits in the month, invalid date
for (var x=0; x < dateMonth.length; x++)
{
var digit = dateMonth.substring(x, x+1);

if ((digit < "0") (digit > "9"))
{
return false;
}
}

// convert the text month to a number
var numMonth = 0;

for (var x=0; x < dateMonth.length; x++)
{
digit = dateMonth.substring(x, x+1);
numMonth *= 10;
numMonth += parseInt(digit);
}

if ((numMonth <= 0) (numMonth > 12))
{
return false;
}

// if any non-digits in the day, invalid date
for (var x=0; x < dateDay.length; x++)
{
digit = dateDay.substring(x, x+1);
if ((digit < "0") (digit > "9"))
{
return false;
}
}

// convert the text day to a number
var numDay = 0;

for (var x=0; x < dateDay.length; x++)
{
digit = dateDay.substring(x, x+1);
numDay *= 10;
numDay += parseInt(digit);
}

if ((numDay <= 0) (numDay > 31))
{
return false;
}

// February can't be greater than 29 (leap year calculation comes later)
if ((numMonth == 2) && (numDay > 29)) { return false; }

// check for months with only 30 days
if ((numMonth == 4) (numMonth == 6) (numMonth == 9) (numMonth == 11))
{
if (numDay > 30)
{
return false;
}
}

// if any non-digits in the year, invalid date
for (var x=0; x < dateYear.length; x++)
{
digit = dateYear.substring(x, x+1);

if ((digit < "0") (digit > "9"))
{
return false;
}
}

// convert the text year to a number
var numYear = 0;

for (var x=0; x < dateYear.length; x++)
{
digit = dateYear.substring(x, x+1);
numYear *= 10;
numYear += parseInt(digit);
}

// Year must be a 2-digit year or a 4-digit year
if ( dateYear.length != 4 )
{
return false;
}

// check for leap year if the month and day is Feb 29
if ((numMonth == 2) && (numDay == 29))
{
var div4 = numYear % 4;
var div100 = numYear % 100;
var div400 = numYear % 400;

// if not divisible by 4, then not a leap year so Feb 29 is invalid
if (div4 != 0)
{
return false;
}

// at this point, year is divisible by 4. So if year is divisible by
// 100 and not 400, then its not a leap year so Feb 29 is invalid
if ((div100 == 0) && (div400 != 0))
{
return false;
}
}

// date is valid
return true;
}
</script>
</head>

<body>
<form name="aForm" id="aForm">
<input type="text" name="aDate" id="aDate" value="MM/DD/YYYY"/>
<input type="button" value="Check Date" onclick="alert(isValidDate(document.aForm.aDate.value));"/>
</form>
</body>
</html>