How can I perform error checking on a form
to ensure that the user is entering data into the fields?
You have two ways to do this.
The first is to use "<CFFORM>" not recommended, but it works ;)
It's not recommended because it doesn't give you the total control you truly
need to have, but it does work!
<cfform action="apage.cfm"
method="post">
<table border="0"
width="100%"
cellspacing="1">
<tr>
<td width="100%"
bgcolor="#99CC99"><b><i><font
size="3"
face="Verdana">Contact My Company</font></i></b></td>
</tr>
<tr>
<td width="100%"
bgcolor="#EFEFEF"><font
face="Verdana"
size="1">A form explanation goes here</font></td>
</tr>
<tr>
<td width="100%">
<table
border="0"
width="100%"
cellspacing="1"
cellpadding="2">
<tr>
<td width="50%"><font
face="Verdana"
size="1"><strong>Your Name:</strong></font></td>
<td width="50%"><cfinput
type="text"
name="fullname"
size="40"
required="Yes" message="Please enter your full
name!"></td>
</tr>
<tr>
<td width="100%"
colspan="2"
bgcolor="#EFEFEF"></td>
</tr>
<tr>
<td width="50%"><font
face="Verdana"
size="1"><strong>Your Email:</strong></font></td>
<td width="50%"><cfinput
type="text"
name="email"
size="40" required="Yes"
message="Please enter your email
address!"></td>
</tr>
<tr>
<td width="100%" colspan="2"
bgcolor="#EFEFEF"></td>
</tr>
<tr>
<td width="50%"></td>
<td width="50%"><font
face="Verdana"
size="1"><input
type="submit"
value="Send Form"
name="Process"></font></td>
</tr>
<tr>
<td width="100%"
colspan="2"
bgcolor="#EFEFEF"></td>
</tr>
</table>
</td>
</tr>
</table>
</cfform>
The second alternative you have is as follows:
<!--- This javascript will check for form errors --->
<SCRIPT LANGUAGE="JavaScript">
function checkForm(){
theform=document.contact
// Check that the form has a full name specified in the field called "fullname"
if (theform.fullname.value==""){
alert("Please provide your full name.")
theform.fullname.focus()
return false;
}
// Check that the form has an email specified in the field called
"email"
if (theform.email.value==""){
alert("Please provide your email address.")
theform.email.focus()
return false;
}
return true;
}
</SCRIPT>
<form method="POST"
action="apage.cfm"
name="contact"
onsubmit='return
checkForm();'>
<table border="0"
width="100%" cellspacing="1">
<tr>
<td width="100%"
bgcolor="#99CC99"><b><i><font
size="3"
face="Verdana">Contact
My Company</font></i></b></td>
</tr>
<tr>
<td width="100%"
bgcolor="#EFEFEF"><font
face="Verdana"
size="1">A
form explanation goes here</font></td>
</tr>
<tr>
<td width="100%">
<table border="0"
width="100%"
cellspacing="1"
cellpadding="2">
<tr>
<td width="50%"><font
size="1" face="Verdana"><strong>Your Name:</strong></font></td>
<td width="50%"><input
type="text"
name="fullname"
size="40"></td>
</tr>
<tr>
<td width="100%"
colspan="2"
bgcolor="#EFEFEF"></td>
</tr>
<tr>
<td width="50%"><font
size="1"
face="Verdana"><strong>Your Email:</strong></font></td>
<td width="50%"><input
type="text"
name="email"
size="40"></td>
</tr>
<tr>
<td width="100%"
colspan="2"
bgcolor="#EFEFEF"></td>
</tr>
<tr>
<td width="50%"></td>
<td width="50%"><font
size="1"
face="Verdana"><input
type="submit"
value="Send Form"
name="Process"></font></td>
</tr>
<tr>
<td width="100%"
colspan="2"
bgcolor="#EFEFEF"></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
Ok, notice the color combinations. The text you
have in this color is the name of the form,
this is used so the JavaScript can tell which form to validate against [in case
you have multiple forms on a page]. The next is the fieldnames fullname
and email these are the fields you want
verified. The last item is the value "onsubmit='return
checkForm();'" in your <form>
tag. This will simply tell the page, that when a user clicks the submit button,
to execute the JavaScript (which then checks for those fields).
Note that the JavaScript checks
and if those fields are EMPTY, it will post an alert (a pop-up message) letting
the user know what they forgot to enter, then it will automatically take the
cursor to that field, so that the user can actually enter a value.
Questions? Comments? Email
Me...
Date added: Wed. October 16, 2002
Posted by: Pablo Varando | Views: 19963 | Tested Platforms: CF5 | Difficulty: Intermediate
Error Handling
Forms
JavaScript dependancy
The only thing I would add is a warning to never substitute client side validation for server side validation. Client side validation should only be used for enhancing the user experience. Server side validation is required for data integrity (and security).
Posted by: Steve Sommers
Posted on: 05/25/2004 09:17 PM
|
CFFORM
If you create your form using cfform, you'll already have javascript validation.. These tutorials should include notes that they are written for older versions of ColdFusion. Read the LiveDocs!
Posted by: Coder
Posted on: 03/31/2006 05:00 AM
|
|