Add server validation to your web forms

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

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

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

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!

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!

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