|
|
 |
|
Lesson 13: Form validation |
|
Lesson 13: Form validation
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.
| |
|
|
|
|
