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...

About This Tutorial
Author: Pablo Varando
Skill Level: Intermediate 
 
 
 
Platforms Tested: CF5
Total Views: 189,511
Submission Date: October 16, 2002
Last Update Date: June 05, 2009
All Tutorials By This Autor: 47
Discuss This Tutorial
  • 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!

  • 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).

Advertisement


Website Designed and Developed by Pablo Varando.