Web Developer's Virtual Library: Encyclopedia of Web Design Tutorials, Articles and Discussions


WDVL Newsletter

Active Server Pages
JSP/Java Servlets
Microsoft SQL Server
Daily Backup
Dedicated Servers
Streaming Audio/Video
24-hour Support    

jobs.webdeveloper.com

Hiermenus


e-commerce
Partner With Us















Developer Channel
FlashKit.com
JavaScript.com
JavaScriptSource
Developer Jobs
ScriptSearch
StreamingMediaWorld
Web Developer's Journal
Web Developer's Virtual Library
WebDeveloper.com
Webreference
Web Hosts
XMLfiles.com

internet.com
IT
Developer
Internet News
Small Business
Personal Technology

Search internet.com
Advertise
Corporate Info
Newsletters
Tech Jobs
E-mail Offers


Finalizing the Form

October 16, 2000

Adding a Username and Password to the Form

The nice thing about generic designs is that they are re-usable, which saves a lot of headache and a lot of coding if done correctly. Since the data we need to collect is already ready to go in our existing form, we need only add some logic for a username and password. I think adding them to the top of the form is most appropriate, so in an abbreviated format, here is what it should look like:

<%
const numFields = 11
'change the above from 9 to 11
dim errorArray()
redim preserve errorArray(numFields)


if request.form("isSubmitted") = "yes" then
	'add username and password here
	username = request.form("username")
	password = request.form("password")
	first_name = request.form("first_name")
	last_name = request.form("last_name")
	social_security = request.form("social_security")
	address = request.form("address")
	city = request.form("city")
	state = request.form("state")
	zip_code = request.form("zip_code")
	telephone = request.form("telephone")
	email = request.form("email")
	'the rest of your ASP goes here...
%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Form Field Validation Sample</title>
</head>
<body>
<% if ErrorMsg <> "" then %>
	<font color="red" size="3"><b>
	<%= ErrorMsg %>
	</font><br>
<% end if %>
<form name="sample1" method="post">
<table width="50%" cellspacing="1" cellpadding="0" border="0">
<!-- NEW CODE GOES HERE -->
<tr>
<td>
	<% if errorArray(9) = "True" then %>
		<font color="red"><b>
	<% end if %>Username:
	<% if errorArray(9) = "True" then %>
		</b></font>
	<% end if %>
</td>
<td>
	<input name="username" size="10"
	maxlength="10" 	value="<%= username %>">
</td>
</tr>
<tr>
<td>
	<% if errorArray(10) = "True" then %>
		<font color="red"><b>
	<% end if %>Password:
	<% if errorArray(10) = "True" then %>
		</b></font>
	<% end if %>
</td>
<td>
	<input type="password" name="password"
	size="10" maxlength="10">
</td>
</tr>
<!-- END NEW CODE -->
<!-- RESUME REST OF OLD CODE -->

Some things to note in the above code. First and foremost, remember to change the number of required fields assigned to the constant numFields. That is very important for validation, because it defines how many elements will be in the errorArray. Also note that rather then renumbering everything, we are merely tacking two elements on the end for Username and Password. It does not matter if they appear first or last in the actual HTML for the form. Lastly, we need to discuss how we will validate this information. There are a number of considerations to take into account. First, neither username nor password can be left blank. Second, username should be greater then four characters and can be made up of alphanumeric characters. Password must be at least eight characters long and can also be made up of alphanumeric characters. Third, username cannot be the same as a username already stored in the database. For now, we can easily deal with the first two considerations, but until we learn about how to talk to the database, the third will have to wait.

To be consistent, I recommend using regular expressions to validate the username and password. However, do not feel required to do so, any way you think up that is best for you will do fine. The two blocks of code shown below both utilize regular expression patterns that check for \w or any alphabetic or numeric character (including underscore). It checks for four characters in the case of username and 8 in the case of password. Note that the $ was omitted from the end of the pattern so that it does not match against the whole field globally - that means a user can have a larger username then four if they want - up to the maximum length of the input field. Again, I will leave it up to you to spruce up things like the error message (ErrorMsg).

'...
'Username
re.Pattern = "\w{4}"
results = re.Test(username)
if results then
	errorArray(9) = "False"
else
	errorArray(9) = "True"
	ErrorMsg = ErrorMsg & "Username<br>"
end if


'Password
re.Pattern = "\w{8}"
results = re.Test(password)
if results then
	errorArray(10) = "False"
else
	errorArray(10) = "True"
	ErrorMsg = ErrorMsg & "Password<br>"
end if
'...
NOTE: Do not forget to modify the ErrorMsg code for First Name. It should now look like ErrorMsg = ErrorMsg & "First Name<br>". You need to do this so that if there is an error for Username or Password, those will show up in the message. If you omit this, Username and Password will be highlighted red, but will not be included in the list at the top of the page!

All right, now that the username and password are squared away (at least for the time being), move on to the next page and we will talk about setting up the database.

Part 3 - Building a Registration Database
Part 3 - Building a Registration Database
Web Databases 101


Up to => Home / Authoring / ASP / FormHandling




Jupiter Online Media: internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and Jupiter Online Media

Jupitermedia Corporate Info


Legal Notices, Licensing, & Permissions, Privacy Policy.

Web Hosting | Newsletters | Tech Jobs | Shopping | E-mail Offers