|
|
Scriptlet |
JScript Object |
|
Provides a defined public interface |
Yes. Only the declared functions are exposed. |
No. All functions are exposed, including the
created object.
|
|
Available for down-level browsers |
No. |
Yes. |
|
Security restrictions |
Not available if security level is set to high. |
Always available. |
|
Language requirements |
Available for VBScript and JScript. |
JScript must be used. |
Figure 2 Sample Validation File
// return the display name of the document item
function display_name(item) {
var strDisplay = item.getAttribute("DisplayName");
if (strDisplay==null || strDisplay=="")
strDisplay = "Field";
return strDisplay;
}
// function definition for use with the item change event
function es_item_selected() {
var item = event.srcElement;
event.returnValue = vs_item_selected(item);
}
// function definition to perform the item selected validation
function vs_item_selected(item) {
// define the error message using the items display name
var strErrorMsg = display_name(item) + " must be a valid selection";
// ensure the first item is not selected
if (item.selectedIndex==0) {
item.focus();
alert(strErrorMsg);
return false;
}
return true;
}
// construct the validation object
function validation_construct() {
this.eventItemSelected = es_item_selected;
this.itemSelected = vs_item_selected;
return this;
}
// define the exposed validation object
// and call the object constructor
var validation = new Object;
validation = validation_construct();
Figure 3 JScriptExample.asp
<html>
<head>
<title>Validation Example</title>
<script language="JavaScript" src="validation.js"></script>
</head>
<body>
<h3>Validation Example</h3>
<form method="POST" onsubmit="return frmScriptSubmit();" name="frmScript">
<p><select name="lstMyComboBox" size="1">
<option value="Select your favorite scripting language">
Select your favorite scripting language</option>
<option value="VB Script">VB Script</option>
<option value="Java Script">Java Script</option>
<option value="Perl">Perl</option>
</select></p>
<p><input type="submit" value="Submit" name="cmdSubmit">
<input type="reset" value="Reset" name="cmdReset"></p>
</form>
<p>Previously selected <% = Request("lstMyComboBox") %></p>
</body>
<script language="JavaScript">
document.all.lstMyComboBox.setAttribute("DisplayName","My Combo Box selection");
function frmScriptSubmit() {
if (!validation.ItemSelected(document.all.lstMyComboBox))
return false;
}
</script>
</html>
Figure 4 VBScriptExample.asp
<html>
<head>
<title>Validation Example</title>
<script language="JavaScript" src="validation.js"></script>
</head>
<body>
<h3>Validation Example</h3>
<form method="POST" name="frmScript">
<p><select name="lstMyComboBox" size="1">
<option value="Select your favorite scripting language">
Select your favorite scripting language</option>
<option value="VB Script">VB Script</option>
<option value="Java Script">Java Script</option>
<option value="Perl">Perl</option>
</select></p>
<p><input type="submit" value="Submit" name="cmdSubmit">
<input type="reset" value="Reset"
name="cmdReset"></p>
</form>
<p>Previously selected <% = Request("lstMyComboBox") %></p>
</body>
<script language="VBScript">
Call window.document.all.lstMyComboBox.setAttribute("DisplayName",
"My Combo Box selection")
Function frmScript_onSubmit()
If NOT validation.ItemSelected(document.all.lstMyComboBox) Then
frmScript_onSubmit = False
End If
End Function
</script>
</html>
Figure 6 Personal Information File
<html><head>
<title>Personal Information</title>
<style>
PRE {font-family:Times New Roman; color:navy}
H3 {text-align:center; color:navy}
</style>
<script language="JavaScript" src="validation.js"></script>
<script language="JavaScript">
function frmPersonalSubmit() {
if (document.all.txtAddressOne.value.Trim()=='') {
document.all.txtAddressOne.value = document.all.txtAddressTwo.value;
document.all.txtAddressTwo.value = '';
}
if (!validation.nonBlank(document.all.txtFullName))
return false;
if (!validation.validDate(document.all.txtDoB))
return false;
if (!validation.validHours(document.all.txtHours))
return false;
if (!validation.nonBlank(document.all.txtAddressOne))
return false;
if (!validation.nonBlank(document.all.txtCity))
return false;
if (!validation.itemSelected(document.all.txtState))
return false;
if (!validation.validZip(document.all.txtZip))
return false;
if (!validation.validSSNbr(document.all.txtSSNbr))
return false;
if (!validation.validEmail(document.all.txtEmail))
return false;
}
</script>
</head>
<body>
<h3>Personal Information</h3>
<form method="POST" onsubmit="return frmPersonalSubmit();"
name="frmPersonal" action="personalupdate.asp">
<pre><label for="txtFullName">Full Name </label>
<input type="text" name="txtFullName" id="txtFullName" size="50" tabindex="1">
<label for="txtDoB">Date of Birth </label>
<input type="text" name="txtDoB" id="txtDoB" size="12" tabindex="2"></pre>
<pre><label for="txtHours">Std Work Hours </label>
<input type="text" name="txtHours" id="txtHours" size="6" tabindex="3" value="40">
</pre>
<pre><label for="txtAddressOne">Address Line 1 </label>
<input type="text" name="txtAddressOne" id="txtAddressOne" size="50" tabindex="4">
<label for="txtAddressTwo">Address Line 2 </label>
<input type="text" name="txtAddressTwo" id="txtAddressTwo" size="50" tabindex="5">
<label for="txtCity">City </label>
<input type="text" name="txtCity" id="txtCity" size="30" tabindex="6">
<label for="txtState">State </label>
<select name="txtState" id="txtState" size="1" tabindex="7">
<option value="(State)">(State)</option><option value="CO">Colorado</option>
<option value="MD">Maryland</option><option value="VA">Virginia</option>
<option value="WA">Washington</option></select>
<label for="txtZip">Zip Code </label>
<input type="text" name="txtZip" id="txtZip" size="12" tabindex="8"></pre>
<pre><label for="txtSSNbr">SS Number </label>
<input type="text" name="txtSSNbr" id="txtSSNbr" size="15" tabindex="9"></pre>
<pre><label for="txtEmail">Email Address </label>
<input type="text" name="txtEmail" size="50" id="txtEmail" tabindex="10"></pre>
<p><input type="submit" value="Submit" name="cmdSubmit">
<input type="reset" value="Reset" name="cmdReset"></p>
</form></body>
<script language="JavaScript">
// Define the display names for the form fields and default values
document.all.txtFullName.setAttribute("DisplayName","Full Name");
document.all.txtDoB.setAttribute("DisplayName","Date of Birth");
document.all.txtHours.setAttribute("DisplayName","Standard Work Hours");
document.all.txtAddressOne.setAttribute("DisplayName","First Address Line");
document.all.txtCity.setAttribute("DisplayName","City");
document.all.txtState.setAttribute("DisplayName","State");
document.all.txtZip.setAttribute("DisplayName","Zip Code");
document.all.txtSSNbr.setAttribute("DisplayName","Social Security Number");
document.all.txtEmail.setAttribute("DisplayName","Email Address");
</script>
</html>
Figure 7 Validation Using JScript
// This set of functions are general includes for validation
// The validation and the event function are designed in pairs
// the event function will call the validation with the event src
function display_name(item) {
var strDisplay = item.getAttribute("DisplayName");
if (strDisplay==null || strDisplay=="")
strDisplay="Field";
return strDisplay;
}
//=========================================================
function default_value(item) {
var strDefault = item.defaultValue;
if (strDefault==null || strDefault=="")
strDefault="";
return strDefault;
}
//=========================================================
function trim_string() {
var ichar, icount;
var strValue = this;
ichar = strValue.length - 1;
icount = -1;
while (strValue.charAt(ichar)==' ' && ichar > icount)
--ichar;
if (ichar!=(strValue.length-1))
strValue = strValue.slice(0,ichar+1);
ichar = 0;
icount = strValue.length - 1;
while (strValue.charAt(ichar)==' ' && ichar < icount)
++ichar;
if (ichar!=0)
strValue = strValue.slice(ichar,strValue.length);
return strValue;
}
//=========================================================
function date_toSimpleForm() {
var toSimpleForm = new String;
toSimpleForm = this.toLocaleString();
toSimpleForm = toSimpleForm.substring(0,toSimpleForm.indexOf(' '));
return toSimpleForm;
}
//=========================================================
function es_non_blank() {
var item = event.srcElement;
event.returnValue = vs_non_blank(item);
}
//=========================================================
function vs_non_blank(item) {
var strErrorMsg = display_name(item) + " must have a non-blank value";
item.value=item.value.Trim();
if (item.value.length==0) {
item.focus();
alert(strErrorMsg);
return false;
}
return true;
}
//=========================================================
function es_valid_number() {
var item = event.srcElement;
event.returnValue = vs_valid_number(item);
}
//=========================================================
function vs_valid_number(item) {
var strErrorMsg = display_name(item) + " must be a valid numeric";
var strDefault = default_value(item);
if (strDefault.length==0) {
strDefault="0";
}
item.value=item.value.Trim();
if (item.value.length==0)
item.value=strDefault;
var num = ".0123456789";
for (var intLoop = 0; intLoop < item.value.length; intLoop++) {
if (num.indexOf(item.value.charAt(intLoop)) == -1) {
item.focus();
alert(strErrorMsg);
return false;
}
}
if (item.value.indexOf(".")!=item.value.lastIndexOf(".")) {
item.focus();
alert(strErrorMsg);
return false;
}
return true;
}
//=========================================================
function es_valid_hours() {
var item = event.srcElement;
event.returnValue = vs_valid_hours(item);
}
//=========================================================
function vs_valid_hours(item) {
var strErrorMsg = display_name(item);
if (!vs_valid_number(item))
return false;
var itemValue = new Number(item.value);
if ((itemValue < 0 || itemValue > 80)) {
item.focus();
alert(strErrorMsg + " must have a value from 0 to 80 hours");
return false;
}
itemValue *= 4;
if ((itemValue)!=Math.ceil(itemValue)) {
item.focus();
alert(strErrorMsg + " must be a valid quartely increment");
return false;
}
return true;
}
//=========================================================
function es_valid_date() {
var item = event.srcElement;
event.returnValue = vs_valid_date(item);
}
//=========================================================
function vs_valid_date(item) {
var strErrorMsg = display_name(item);
if (isNaN(Date.parse(item.value))) {
item.focus();
alert(strErrorMsg + " must be a valid Date");
return false;
}
var dtItem = new Date(Date.parse(item.value));
item.value = dtItem.toSimpleForm();
return true;
}
//=========================================================
function es_item_selected() {
var item = event.srcElement;
event.returnValue = vs_item_selected(item);
}
//=========================================================
function vs_item_selected(item) {
var strErrorMsg = display_name(item) + " must be a valid selection";
if (item.selectedIndex==0) {
item.focus();
alert(strErrorMsg);
return false;
}
return true;
}
//=========================================================
function es_valid_zip() {
var item = event.srcElement;
event.returnValue = vs_valid_zip(item);
}
//=========================================================
function vs_valid_zip(item) {
var strErrorMsg = display_name(item) + " must be of the form 99999-9999";
item.value=item.value.Trim();
if (!(/^\d{5}$/.test(item.value) || /^\d{5}-\d{4}$/.test(item.value))) {
item.focus();
alert(strErrorMsg);
return false;
}
return true;
}
//=========================================================
function es_valid_ssnbr() {
var item = event.srcElement;
event.returnValue = vs_valid_ssnbr(item);
}
//=========================================================
function vs_valid_ssnbr(item) {
var strErrorMsg = display_name(item) + " must be of the form 999-99-9999";
item.value=item.value.Trim();
if (!(/^\d{3}-\d{2}-\d{4}$/.test(item.value))) {
item.focus();
alert(strErrorMsg);
return false;
}
return true;
}
//=========================================================
function es_valid_email() {
var item = event.srcElement;
event.returnValue = vs_valid_email(item);
}
//=========================================================
function vs_valid_email(item) {
var strErrorMsg = display_name(item) + " is not a valid Email";
item.value=item.value.Trim();
if (!(/^[\w\.]+@[a-z\.]+$/.test(item.value))) {
item.focus();
alert(strErrorMsg);
return false;
}
return true;
}
//=========================================================
// build the validation object
function validation_setup() {
this.eventNonBlank = es_non_blank;
this.nonBlank = vs_non_blank;
this.eventValidNumber = es_valid_number;
this.validNumber = vs_valid_number;
this.eventValidHours = es_valid_hours;
this.validHours = vs_valid_hours;
this.eventValidDate = es_valid_date;
this.validDate = vs_valid_date;
this.eventItemSelected = es_item_selected;
this.itemSelected = vs_item_selected;
this.eventValidZip = es_valid_zip;
this.validZip = vs_valid_zip;
this.eventValidSSNbr = es_valid_ssnbr;
this.validSSNbr = vs_valid_ssnbr;
this.eventValidEmail = es_valid_email;
this.validEmail = vs_valid_email;
return this;
}
//=========================================================
// Extend the string object to include a trim function
String.prototype.Trim = trim_string;
// Extend the date object to include a simple form string conversion
Date.prototype.toSimpleForm = date_toSimpleForm;
// Construct the validation object
var validation = new Object;
validation = validation_setup();
Figure 8 Key Press Processing
// This set of functions are for processing the key press event
// Used to restrict input on numerics and pure textual fields
function kp_integer() {
if ((event.keyCode < 48 || event.keyCode > 57))
event.returnValue = false;
}
function kp_numeric() {
if ((event.keyCode != 46) && (event.keyCode < 48 || event.keyCode > 57))
event.returnValue = false;
if (event.keyCode == 46) {
if (event.srcElement.value.indexOf(".") > -1)
event.returnValue = false;
}
}
function kp_character() {
if ((event.keyCode < 65 || event.keyCode > 90) && (event.keyCode < 97 ||
event.keyCode > 122))
event.returnValue = false;
}
function kp_convert_upper() {
if ((event.keyCode >= 97 && event.keyCode <= 122))
event.keyCode -= 32;
}
function kp_convert_lower() {
if ((event.keyCode >= 65 && event.keyCode <= 90))
event.keyCode += 32;
}
function kp_setup() {
this.integer = kp_integer;
this.numeric = kp_numeric;
this.character = kp_character;
this.convertUpper = kp_convert_upper;
this.convertLower = kp_convert_lower;
return this;
}
var keyPressInput = new Object;
keyPressInput = kp_setup();