Error Handling

Can someone tell me how to set error handling for the form listed below.  I need to make firstname, lastname, and email all required and have an error message saying that they didn't fill in one of the fields.  I would also like to have the email make sure that it is a valid format with the @ symbol.  

Any help would be appreciated.  Here is the code with my form


<cfquery name="GetStates" datasource="aptvre">
SELECT * FROM ws_state
ORDER BY StateName

<cflock type="readonly" scope="session" timeout="30">
<cfset  varworkshopName = session.workshopname>
<cfset varfirstName = session.Firstname >
<cfset varlastName = session.Lastname>
<cfset varworkshopID = session.workshopID>
<cfset varfacilitatorID = session.facilitatorID>

<cfquery name="GetDistricts" datasource="aptvre">
SELECT * FROM ws_districts
ORDER BY StateId, districtName

<cfquery name="GetTeacher" datasource="aptvre">
Select *
FROM ws_teacher
Order by teacherID, TeacherLastName;

<cfset CurrentPage=GetFileFromPath(GetTemplatePath())>
<cfquery name="GetSchools" datasource="aptvre">
SELECT ws_school .*,
ws_districttoschool.DistrictID FROM ws_school
INNER JOIN ws_districttoschool ON
ws_school.SchoolID =
ORDER BY ws_districttoschool.DistrictID, SchoolName
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>EFE Teacher Registration</title>
<link rel="stylesheet" type="text/css" href="../../styles/intasc_form.css" />
<script type="text/javascript" language="JavaScript">
/* Dynamically populate District select box based on seleted stateID and then Schools based on districtID */
// Create an array to hold Districts and Schools
var DistrictArray = new Array;
var SchoolArray = new Array;

// Define a custom Javascript object type to represent a single District
function District(districtid, stateid, districtname)
     this.districtid = districtid;
     this.stateid = stateid;
     this.districtname = districtname;

// Define a custom Javascript object type to represent a single School
function School(schoolid, districtid, schoolName)
     this.schoolid = schoolid;
     this.districtid = districtid;
     this.schoolName = schoolName;

<!--- For each District, append a new District object to the array of Districts --->
<cfoutput query="GetDistricts">
     DistrictArray[DistrictArray.length] = new District("#JSStringFormat(DistrictId)#", "#JSStringFormat(StateId)#", "#JSStringFormat(DistrictName)#");

<!--- For each School, append a new School object to the array of Schools --->
<cfoutput query="GetSchools">
     SchoolArray[SchoolArray.length] = new School("#JSStringFormat(SchoolId)#", "#JSStringFormat(DistrictId)#", "#JSStringFormat(schoolName)#");

/* Fill the District select box based on the stateID*/
function fillDistricts()
     // Stop if there is no selected ParentID
     if (document.formDistricts.stateID.selectedIndex == -1)
     var stateID = document.formDistricts.stateID.options[document.formDistricts.stateID.selectedIndex].value;
     // Remove all options in the District select box
     document.formDistricts.DistrictID.options.length = 0;
       var ox=0;
     document.formDistricts.DistrictID.options[ox++] = new Option('Select Your District', '-1');
     // For each item in the Districtarray ...
     for (var i = 0; i < DistrictArray.length; i++)
          // If the District's stateIDFK is the same as the currently selected stateID
          if (DistrictArray[i].stateid == stateID)
               // Put a new option in the District select box
               document.formDistricts.DistrictID.options[ox++] = new Option(DistrictArray[i].districtname, DistrictArray[i].districtid);
       document.formDistricts.DistrictID.options.length = ox;

/* Fill the Schools select box based on the DistrictID*/
function fillSchools()
     // Stop if there is no selected ParentID
     if (document.formDistricts.DistrictID.selectedIndex == -1)
     var DistrictID = document.formDistricts.DistrictID.options[document.formDistricts.DistrictID.selectedIndex].value;
     // Remove all options in the Schools select box
     document.formDistricts.SchoolID.options.length = 0;
       var ox=0;
     document.formDistricts.SchoolID.options[ox++] = new Option('Select Your School', '-1');
     // For each item in the Schoolarray ...
     for (var i = 0; i < SchoolArray.length; i++)
          // If the School's DistrictIDFK is the same as the currently selected DistrictID
          if (SchoolArray[i].districtid == DistrictID)
               // Put a new option in the School select box
               document.formDistricts.SchoolID.options[ox++] = new Option(SchoolArray[i].schoolName, SchoolArray[i].schoolid);
       document.formDistricts.SchoolID.options.length = ox;
  <div id="survey">
    <div id="logo">&nbsp;<a href=""><img src="../images/efe_surveylogo.gif" alt="intasc" width="87" height="54" border="0" /></a></div>
    <p class="header">Teacher Registration</p>
      <p class="subsection">User Information </p>
    <form method="POST" name="formDistricts" action="ws_registration_action.cfm">
        <input type="hidden" name="hidworkshopID" value="<cfoutput>#varworkshopID# </cfoutput>">
        <input type="hidden" name="hidfacilitatorID" value="<cfoutput>#varfacilitatorID#</cfoutput>">
      <p class="subsection">Step 1:
        <select name="stateID" onChange="fillDistricts()" style="width: 220px;">
          <option value="">Select State in which You Teach</option>
          <cfoutput query="GetStates">
            <option value="#GetStates.stateid#">#GetStates.statename#</option>
      <p class="subsection">Step 2:
        <select name="DistrictID" onChange="fillSchools()" style="width: 200px;">
         <option value="0">Select Your District</option>
      <p class="subsection">Step 3:
        <select name="SchoolID" style="width: 200px;">
         <option value="0">Select Your School</option>
      <p class="subsection">Step 4:</p>
      <table border="0" cellpadding="6">
          <td align="right">First Name:</td>
          <td><span class="response">
            <input type="text" name="Teach_fname" width="320px">
          <td align="right">Last Name: </td>
          <td><span class="response">
            <input type="text" name="Teach_lname" width="320px">
          <td align="right">Email:</td>
          <td><span class="response">
            <input type="text" name="txtpw" width="280px">
      <p class="instructions">
        <input type="submit" name="Submit" value="SUBMIT">
      <input type="hidden" name="MM_InsertRecord" value="formDistricts">
Who is Participating?
bwasyliukConnect With a Mentor Commented:
Being as you are using Coldfusion, why not use a CFFORM?

Change your <form and </form tags to <cfform and </cfform respectively, and then change your inputs to <cfinput.


<cfinput type="text" name="Teach_fname" required="YES" message="\'First Name:\' is a required field." />

For the email field, add the validate="email" attribute to the tag.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.