-Log in
-Register (free)


-RSS Feeds
-New MyDesk Module
-Update to Profile

Alternate color for RS looping with For Next
Northwind / ASP - Nested select
ASP SQL Injection




 Lesson 13: Form validation
Lesson 13: Form validation

Author: Alexander Haneng
Difficulty: Easy
Requires: ASP
Demo: demo
Download: Lesson13.zip
Summary:
Learn to collect info from forms and validate them with VBScript serverside. All code is available. View the demo to see the result.

Intro:
I can't even count how many form validation scripts I have made. This is something that you just have to know to be an ASP developer. I'll show you have you can collect info with a form, and how to validate it.

The form:
First we have to set up the form where the user will enter the info. You got several types of form elements that you can use, but we will concentrate on the three that is used the most: text field, dropdown box and text area. Here's my little form for collecting info about ASP developers:
<HTML>
<BODY>
<FORM ACTION="validate.asp" METHOD="POST">
Your Name: <INPUT TYPE="Text" NAME="name"><BR>
Your Email: <INPUT TYPE="Text" NAME="email"><BR>
Your ASP skills are:
<SELECT NAME="skills" SIZE="1">
<OPTION VALUE="I suck">I suck</OPTION>
<OPTION VALUE="Pretty bad">Pretty bad</OPTION>
<OPTION VALUE="Bad">Bad</OPTION>
<OPTION VALUE="Good">Good</OPTION>
<OPTION VALUE="Excelent">Excelent</OPTION>
<OPTION VALUE="Better than yours!">Better than yours!</OPTION>
</SELECT>
<BR>
Comment:<BR>
<TEXTAREA NAME="comment" COLS="20" ROWS="5" WRAP="VIRTUAL"></TEXTAREA><BR>
<INPUT TYPE="Submit" VALUE="Submit">
</FORM>
</BODY>
</HTML>

This should be pretty straightforward. As you can see, it sends the info to validate.asp. Now we need to collect the info, and then check if the user have forgotten to fill out the form, or have filled it out wrong.

Collect the info
To collect info from a form use the Request.Form("name") command where name is the name of the form field, checkbox etc. So to collect the info from our form we use this code in validate.asp:
<%
Form_Name = Request.Form("name")
Form_Email = Request.Form("email")
Form_Skills = Request.Form("skills")
Form_comment = Request.Form("comment")
%>
We collect all the info into some variables. You can call the variables what you want, but it will be easier if you name them wisely. I have used a Form_ prefix to mark that the info comes from the form, and then I have used the name of the field.
Next we will validate the info, and for that we have several methods. But first I will mention that it is important to remove extra spaces from the form. Even if the user doesn't add extra spaces, it will sometimes be added by the browser (for some reason). To remove them use Trim(). Let's rewrite our collection script to:
<%
Form_Name = Trim(Request.Form("name"))
Form_Email = Trim(Request.Form("email"))
Form_Skills = Trim(Request.Form("skills"))
Form_comment = Trim(Request.Form("comment"))
%>
Now we will check if any of the fields are empty. We can use the Len() function for this. I often set a minimum value for each field. E.g. an email address seldom has less than 8 characters (1@aa.com). I set the limit at 6 chars (1@a.no). We will let the comment field be optional, so we won't check it's length. We use an IF THEN statement to check the length:
<%
IF len(Form_Email)<6 THEN
  Validated_Form = false
ELSE
  Validated_Form = true
END IF
%>
You can also check if the field contains a specific character. E.g. an email address must contain a @ char. We will use InStr() for this. It returns 0 if the string doesn't contain the search string. So we can make an email check like this:
<%
IF len(Form_Email)<6 OR InStr(Form_Email,"@")=0 THEN
  Validated_Form = false
ELSE
  Validated_Form = true
END IF
%>
The last thing to check for is if the returned values contains " or '. The " symbol marks the start and end of a VBScript string, so if someone types: Alex "The Killer" Haneng in the name filed, VBScript will think that the string ends after Alex . And when it looks for the next command, it will find The Killer and then the start of a new string " Haneng. As you may guess, this will result in an error. The ' sign marks the start and end in a database string. So if you want to store the info to a db, you must remove all the 's. The way we do this is to use Replace() function to replace all the "s and 's. But replace them with what? The solution is using double "s and double 's. You see you can tell VBScript and the database that the symbol doesn't mark the end/start of a string, but is acctually a part of the string. And the way to do this is, as I said, using a double. So you can replace all the "s in a string with using this code:
<%
Form_Email = Replace(Form_Email,"""","""""")
%>
It may seem a bit strange with all the "s, but if you study it closely, you will se that it is the correct amount of "s. Remember that it is important to make this replace as soon as possible so that you don't get an error.
So now to the final code for validate.asp:
<%
Form_Name = Trim(Replace(Request.Form("name"),"""",""""""))
Form_Email = Trim(Replace(Request.Form("email"),"""",""""""))
Form_Skills = Trim(Replace(Request.Form("skills"),"""",""""""))
Form_Comment = Trim(Replace(Request.Form("comment"),"""",""""""))

Validated_Form = true

IF len(Form_Name)<2 THEN
  Validated_Form = false
END IF

IF len(Form_Email)<6 OR InStr(Form_Email,"@")=0 THEN
  Validated_Form = false
END IF

IF len(Form_Skills)<3 THEN
  Validated_Form = false
END IF

IF NOT Validated_Form THEN
  %>
  <HTML>
  <BODY>
  Error. Click back in your browser, and fill it out properly!
  </HTML>
  </BODY>
  <%
ELSE
  'Here you can insert the info to a database, or send it
  'with JMail to you mail account. If you send it to a db, make sure
  'to remove any possible ' chars.
  %>
  <HTML>
  <BODY>
  <B>Thank you for filling out the form   <%=Form_Name%>   !</B>
  <BR><BR>
  You submitted the following information:<BR>
  Name: <I><%=Form_Name%></I><BR>
  Email: <I><%=Form_Email%></I><BR>
  Skills: <I><%=Form_Skills%></I><BR>
  Comment: <I><%=Form_Comment%></I>
  </HTML>
  </BODY>
  <%
END IF
%>


Test it out by clicking here! And download the source code!

Other useful things to check for:
You can also use IsNumeric to check if the entered value is a number or not. (returns a boolean value (true/false)). If you want your info in a special case, then you can use the UCase and LCase functions (click on them to learn how). You can also use IsNull and IsEmpty functions to check if a field is left blank.

Troubleshooting
Here's some general form troubleshooting tips:
-If you got a problem with reading submitted forms, remove the ENCTYPE part of the FORM tag.
-Make 100% sure that the name is the same on the form field and the field you try to retrieve. (I know it sounds stupid, but check it again!)
-Make sure that the ACTION part of the FORM tag is pointing to the right page. (And that the METHOD is POST)


A last comment:
The uses of forms are endless, and there's much more to forms that we have discussed here. Forms are not the only way to submit info from one page to another you also have query strings, but that's another lesson...

Where to go next:
Take a look at our lessons page to get an overview of all our lessons.


12: Make an archive!
14: EZ update!
| Info |
© Copyright 1997-2014 Alexander Haneng