Apply CSS styles and validation to form fields

Tutorial created by Ray Borduin, WebAssist

Categories: Design Extender, CSS, Dreamweaver

6 ratings | Sign in to rate this tutorial | View comments

next section

What will you need to start?

1. Dreamweaver CS3 or higher.
   
2. Data Bridge (alternatively, Validation Toolkit) installed and activated in Dreamweaver.
   
3. PHP page with a form field to be validated and a submit button.

next section

Create the class

1. From the CSS styles panel, choose New CSS Rule.
   
   
   
   
   
2. In the name field enter .fail (with a period in front of fail) and click OK.
   
   
   
   
   
3. Choose the Background category.
   
   
4. Specify a background color to be applied to the text field when it fails validation.
   
   
   
   
   
5. Click OK and save the page. (Ctrl + S or Cmd +S)

next section

Apply server-side validation

1. In the Server Behaviors panel, click +.
   
   
   
   
   
2. Go to WebAssist > Validation > Server Validations.
   
   
3. From the Validation trigger menu, choose any form post.
   
   
4. From the Validation type menu, choose Required/Not Blank/Selection Made.
   
   
5. Click the Server Variable lightning bolt.
   
   
   
   
   
6. Select your form and click OK.
   
   
   
   
   
7. Click + to add the server variable to the list and click OK.
   
   
   
   
   
8. Click OK in the Server Validation: Required window.
   
   
   
   
   
9. Click OK once again and save the page. (Ctrl + S or Cmd +S)

next section

Apply Show If server behavior

1. Next to the text field, enter Your entry was invalid and select the text.
   
   
   
   
   
2. From the Server Behaviors panel, choose + and select WebAssist > Validation > Validation Show If.
   
   
3. In the Validation page field, specify your page that is being validated.
   
   
   
   
   
4. From the Validations fail menu, choose the validation just created and select + to add it.
   
   
   
   
   
5. Click OK and note the change in your form.
   
   
   
   
   
6. Save the page. (Ctrl + S or Cmd +S)

Apply validation to your CSS class

1. Select the Code view button.
   
   
2. In the Server Behaviors panel, choose the Validation Show If Server Behavior. This action selects the Validation code.
   
   
   
   
   
3. Copy the selected code. (Ctrl + C or Cmd + C)
   
   
4. Place your cursor inside the text field and paste the code. (Ctrl + V or Cmd + V)
   
   
   
   
   
   After pasting, you should see the same set of code twice. This is not a mistake and is important to note because of changes you are about to make!
   
   
   
   
   
5. In the code, locate and select the 1st mention of Your entry was invalid. Delete and insert class="fail" in its place. Do not alter the 2nd mention of Your entry was invalid.
   
   
   
   
   
6. Save your page. (Ctrl + S or Cmd + S)
   
   
7. Go to File > Preview in Browser to preview the page in your selected browser. If a user leaves the text field blank and attempts to submit, the text Your entry was invalid will appear, and the text field will change color.
   
   
   

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

6 ratings | Sign in to rate this tutorial