QUICK REFERENCE

Home

Section 01
Lesson 01
Lesson 02
Lesson 03
Lesson 04
Lesson 05

Section 02
Lesson 06
Lesson 07
Lesson 08
Lesson 09

Section 03
Lesson 10
Lesson 11
Lesson 12
Lesson 13

Section 04
Lesson 14
Lesson 15

Section 05
Lesson 16
Lesson 17
Lesson 18
Lesson 19
Lesson 20

Bringing It Together:

Two Lines of Defense, One Function:

What if you could coordinate the client side and server side with the exact same functions? Form field validation comes to mind. It's not that hard for someone to copy your HTML into another script, and then alter the client side form field validation.

The obvious solution is to put form field validation on the server side. But that means a return trip to the server for every little error the user makes. So, how about getting the best of both worlds? Not only that, but how about using the exact same JavaScript function on both the client and the server, so as to ensure perfect consistency.

Take a look at the snippet below, and take particular notice of the function checkMyZip().

<%@LANGUAGE="JavaScript"%>
<%
//No ASP Here, just a regular HTML Page
%>
<HTML>
<SCRIPT LANGUAGE="JavaScript">
<!--Hide
function checkMyZip(zipCode)
	{
	var myRegularExpression=/(^\d{5}$)|(^\d{5}-\d{4}$)/
	if (myRegularExpression.test(zipCode) == true)
		{
		return nothingIsWrong();
		}
	else
		{
		return somethingIsWrong();
		}
	}

function nothingIsWrong()
	{
	//Do nothing
	return true
	}

function somethingIsWrong()
	{
	alert("Something is wrong with the zip code you provided.")
	document.zipCodeForm.zipCodeText.focus()
	return false;
	}
//Stop Hiding-->
</SCRIPT>
<STRONG>Type a valid U.S. Postal zip code into the box, and submit it.</STRONG>
<FORM NAME="zipCodeForm" ACTION="script05a.asp" METHOD="Post" 
onSubmit="return checkMyZip(document.zipCodeForm.zipCodeText.value)">
<INPUT TYPE="Text" NAME="zipCodeText"><BR>
<BR>
<INPUT TYPE="Submit" VALUE="Submit">
</FORM>
</HTML>

Click Here to run the script in a new window.

One of the strongest arguments in favor of using JavaScript as your primary ASP scripting language is just exactly what we're seeing in this lesson. Take a look at the script below and once again take notice of the function checkMyZip().

<%@LANGUAGE="JavaScript"%>
<%
function checkMyZip(zipCode)
	{
	var myRegularExpression=/(^\d{5}$)|(^\d{5}-\d{4}$)/
	if (myRegularExpression.test(zipCode) == true)
		{
		return nothingIsWrong();
		}
	else
		{
		return somethingIsWrong();
		}
	}

function nothingIsWrong()
	{
	//Do nothing
	return true
	}

function somethingIsWrong()
	{
	return false;
	}

var zipCode=new String(Request.Form("zipCodeText"))

if (checkMyZip(zipCode)==true)
	{
	Response.Write("<HTML>\r")
	Response.Write("The zip code you provided... ")
	Response.Write("<FONT COLOR=\"RED\">")
	Response.Write(zipCode + "</FONT> is good.\r")
	Response.Write("</HTML>\r")
	}
else
	{
	Response.Write("<HTML>\r")
	Response.Write("The zip code you provided... ")
	Response.Write("<FONT COLOR=\"RED\">")
	Response.Write(zipCode + "</FONT> has a problem.\r")
	Response.Write("</HTML>\r")
	}

%>

It's not the most eloquent example, but it gets the point across. The primary function that validates data is exactly the same client side and server side. The supporting functions are not the same but the changes there are obvious.

Just for fun, look at then run the script below. There is no client side validation.

<%@LANGUAGE="JavaScript"%>
<%
//No ASP Here, just a regular HTML Page
%>
<HTML>
<STRONG>Type a zip code (with no client side validation) 
into the box submit it.</STRONG>
<FORM NAME="zipCodeForm" ACTION="script05a.asp" METHOD="Post">
<INPUT TYPE="Text" NAME="zipCodeText"><BR>
<BR>
<INPUT TYPE="Submit" VALUE="Submit">
</FORM>
</HTML>

Click Here to run the script in a new window.

Concluding Section 01:

This concludes Section 01 of the lesson plan. Those who have experience writing ASP in VBScript don't need to go any further on this site. They can now use their client side JavaScript skills to convert any function (subroutine), any page, or any application to JavaScript.

The rest of us must continue the journey in Section 02.

Next up.... lesson06.asp

Google
 
Web aspjavascript.com

Copyright James Clark 2005