ASP: simple form validation

Tweet

Form validation is an important element in every web site. In order to be sure that the user submits data in accordance to what our code (or backend database) is expecting, it is mandatory to check the information before doing anything else.
There are tons of ready-made form validation functions on the web, especially written in JavaScript, however sometimes we might need to do something a little bit more customized.
Here I will explain the basic concept behind a form validation using VBScript in an ASP page.

Some variables and styles

First of all we set some variables. In our example, we are going to use a form with only two input fields: a user name and an email. Then we need to set warning messages (one is generic, the second is specific to the email field), and a counter which will increase on errors count.

<%
    Dim send, UserName, email, warning, warningEmail, countError
    send = Request.Form("send")
    UserName = Request.Form("UserName")
    email = Request.Form("email")
    countError = 0
    warning = "<span class=""message""><< Please, fill in the field.</span>"
    warningEmail = "<span class=""message""><< Please, submit a valid email address.</span>"
%>

Just to make our messages and input fields more visible, we can style them. The following CSS rules are very basic, but you can customize them as needed.

<style type="text/css">
        input
        {
            width: 350px;
        }
        .message
        {
            color: #FF0000;
            font-weight: bold;
        }
</style>

The form

We can create the form in a very simple way and inside we will insert the code for validation. Let's see it piece by piece.

<form method="post" action="test.asp">

We open the form tag with post method and action equal to the file name of our ASP page (test.asp).

    <p>
        User Name
        <%
            If send <> "" And UserName = "" Then
                Response.Write warning
                countError = countError + 1
            End If
        %>
        <br><input type="text" name="UserName" value="<%=UserName%>">
    </p>

The above is the first input box (User Name). When we submit the form, the code will check if the UserName field is empty. If so, we show a warning message and increase the countError variable by one.

    <p>
        Email
        <%
            If send <> "" And email = "" Then
                Response.Write warning
                countError = countError + 1
            End If
            If send <> "" And email <> "" And InStr(email,"@") < 2 Then
                Response.Write warningEmail
                countError = countError + 1
            End If
        %>
        <br><input type="text" name="email" value="<%=email%>">
    </p>

Second input box: the email field. Just as an example, we will perform two different checks on the submitted data. The first will see if the email field is empty and, if so, it will show a generic warning message. The second part will check if the submitted data contains @ and at least one character before it. If not, the code will show a specific error message (warningEmail).

    <p><input type="submit" name="send" value="Submit"></p>
</form>

Finally we have the submit button and the form closing tag.

The final check

If everything goes well and all the checks are ok, we can finally submit the data.

<%
    If send <> "" And countError = 0 Then
        With Response
            .Write "<p>Insert here your submit function</p>"
        End With
    End If
%>

If countError is equal to zero (meaning no error found) we can submit the information. In the given example we just write a message saying the all went well, however that part is where we should insert our main code which might be an insert command, an email forwarding or whatever you like.

Further on

The checks we've developed with the above code are very simple. But it is quite clear that we can create more complex controls on submitted information. What makes the above snippet incredibly flexible is the fact that we can insert specific validation checks on every single field, giving us a wider customization.