HostMySite.Com is sponsoring this tutorial, please visit their site today!

Implementing FORM Error Checking On Your Pages! by: Pablo Varando

[Download in PDF Format] [Download in FlashPaper Format]

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

HostMySite.Com is sponsoring this tutorial, please visit their site today!

Please rate this tutorial:

Post a new comment on this tutorial
post a new comment on this particular tutorial
Your Name:
Your Email:
Comment Title:
Comments:
Key Phrase: