close ad
 
Important WebAssist Announcement
open ad
View Menu

Web development tutorial

Add server validation to your web forms

Tutorial created by Ray Borduin, WebAssist

Categories: Data Bridge, eCart

rating

This tutorial will teach you how to use validation on your website.

In this example, we use an eCart form configured to use credit card payments. You do not need to use eCart for this tutorial, but we will be mentioning specific fields and some cool, advanced topics later on, so if you are following along with different forms, or using an eCart site configured with a different payment gateway setup, take note of the changes.

arrow downWhat you need to start

  1. Dreamweaver CS3 or later
  2. Data Bridge installed and activated in Dreamweaver


Optional:

  1. A working eCart site with credit card payments
  2. eCart installed and activated in Dreamweaver

arrow downAdd validation messages

The first step that we're going to rock out is the creative portion of our quest. We need to add the error messages we want displayed after the fields we are validating. We're also formatting them to look all pretty so we can dazzle the people who fail at using our forms.

  1. Open your form page
    We're using the checkout.php page from eCart, but you can use whatever page your heart darn well fancies
  2. After the fields you want to validate, enter the validation text you want displayed if they fail
    In our case, we're validating after the Credit cart number field, and the CVV code field. Our error messages read, "Please enter a valid creditcard number", and "Please enter your CVV code"
  3. Format the errors how you want them to display
    We made them bold, red, and proud
  4. Save your page

arrow downValidate the fields

Now that you have those fancy pants errors for all the world to see, let's get our validati-on!

Add Form Data

  1. Open your form's action page
    Since we're using eCart, this will be the confirm.php page
  2. Click Window > Bindings to ensure the Bindings floater is visible
  3. Click the Add ( ) Binding button
  4. Click Form Data
  5. Click the Browse button
  6. Select the form page that's submitting to this page
    In our case it will be checkout.php
  7. Click Choose to select the page
  8. Click OK to apply the Form Data binding


Configure validations

  1. Click Window > Server Behaviors to ensure the Server Behaviors floater is visible
  2. Click the Add ( ) Server Behaviors button
  3. Click WebAssist > Validation > Server Validations
  4. Change Validation type to the validation type you wish to use
  5. For this tutorial, we'll do the credit card first, so select Credit Card Number
  6. For the Server variable, click the dynamic lightning bolt
  7. Expand your form
  8. In our case, the form with our data will be ecart_checkout_form
  9. Select the field you want to validate
  10. We're going to be using cc_number
  11. Click OK
  12. Click the Add ( ) button
  13. Select the validation options you wish to use
  14. Since we are using credit card numbers, this will be the types of cards we will accept
  15. Click OK
  16. Now let's add CVV validation. If you're using another form, just pretend the eCart specific things I say are related to your form so I look psychic
  17. Change Validation type to Required / Not Blank / Selection Made
  18. For the Server variable, click the dynamic lightning bolt
  19. Expand ecart_checkout_form
  20. Select cvv as the field
  21. Click OK
  22. Click the Add ( ) button
  23. Make sure the Allow spaces checkbox is unchecked
  24. Click OK
  25. Click Browse for the Failed Redirect field
  26. Select your form page
  27. In this tutorial it's, of course, checkout.php
  28. Click OK to select the page
  29. Click OK again to apply the validation server behavior

arrow downShow validations on failure

Now we're going to show those validations that we set up ONLY when the user actually fails to enter the correct data in the field

  1. Open your form page
  2. As I've said a few times now, this will be checkout.php
  3. Highlight one of your error messages
  4. Let's us do the Credit card number error message
  5. Click Window > Server Behaviors to ensure the Server Behaviors floater is visible
  6. Click the Add ( ) Server Behaviors button
  7. Click WebAssist > Validation > Validation Show If
  8. For Validation page, click the Browse button
  9. Select your form's action page
  10. This will be confirm.php if you're following along with eCart
  11. Click OK
  12. Change Validations fail to the Credit card option
  13. Click the ( ) button
  14. Click OK
  15. Repeat the same steps for any additional fields that need more validation
  16. In our case it will be CVV
  17. Make sure to use the correct Validations fail selection for the field being validated
  18. For CVV, it will be Required
  19. SAVE ALL THE THINGS!

arrow downSet default values for fields

When your form is submitted, if a validation is triggered all data will be lost when the page is reloaded. To fix this, we will set default values for all the fields that are equivalent to validated data. This way, if data has already been validated as correct, it will be retained in the fields

For text fields

  1. Click on one of your validated fields
  2. This time around, we're going to use the Credit card number field
  3. In the Properties Inspector, click the dynamic lightning bolt for the Init val field
  4. Expand WA Validated Entries
  5. Select the field name that is the same as the field you have selected
  6. Of course, this one is cc_number
  7. Click OK
  8. Repeat the steps for all validated fields
  9. We'll do this for CVV. Don't forget to select cvv in the WA Validated Entries list
  10. SAVE YOUR DARN PAGE


For drop down lists

  1. Click on one of the drop downs if you have any
  2. Let's pick the Credit card type drop down
  3. In the Properties Inspector, click the Dynamic button
  4. For the Select value equal to field, click the dynamic lightning bolt
  5. Expand the WA Validated Entries
  6. Select your field's name
  7. This time it'll be cc_type
  8. Click OK
  9. Click OK again
  10. Repeat these steps for all drop downs in the form
  11. Save your page!

arrow downReviews and comments

Comments will be sent to the author of this tutorial and may not be answered immediately. For general help from WebAssist, please visit technical support.

Sign in to add comments
rating
rating

Cheyanne: 9 Years, 7 Months, 4 Weeks, 2 Days, 17 Hours, 1 Minute ago

I do not believe that your using an ECart form was the best choice to make. Why did you not take a "normal" web page (containing a form) and offer a before and after page files to enable people to contrast the differences? This would have been far more useful exercise for those wanting to develop server validation. forms. The example should have been linked to Data Bridge and not ECart which many people may well not own.

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.