close ad
Install the LAtest Updates to Work with CC 2017 and CC 2018
open ad
View Menu

Web development tutorial

Apply CSS styles and validation to form fields

Tutorial created by Kate Ford

Categories: Design Extender, CSS, Dreamweaver

rating

Validation Toolkit applies unique CSS styling to actual form elements. This advanced technique highlights whether form elements pass or fail validation. For example, when the text field fails validation, users will be alerted by a change in color.

To achieve this, you will learn to use the Validation Show If server behavior provided in Validation Toolkit. However, instead of applying this to an element on the page, a custom CSS class will be applied to the input field when validation fails.

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

arrow downCreate 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)

arrow downApply 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)

arrow downApply 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)

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

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

sbaczanski436733: 4 Years, 5 Months, 3 Weeks, 6 Days, 10 Hours, 24 Minutes ago

how about .invalid as a class instead of .fail

rating

Team WebAssist: 4 Years, 5 Months, 3 Weeks, 2 Days, 8 Hours, 37 Minutes ago

We use .fail because in a real scenario, we would be applying this class in multiple places and we're essentially saying that a field is failing validation. It could be "entry required" validation or "password doesn't match" validation or "nice try but that's not your stinkin' credit card" validation. Anyhow, you can name the class anything you want as long as you continue to use that throughout the tutorial. Invalid is another good example because it's pretty generic.

rating

Mysite07430650: 4 Years, 2 Months, 3 Weeks, 5 Days, 2 Hours, 12 Minutes ago

Excellent tutorial Kate. Well thought through and clearly explained. Thank you.

Kate Ford: 4 Years, 2 Months, 3 Weeks, 4 Days, 4 Hours, 13 Minutes ago

Hi Mysite07430650, Thank you for your comment. It's always nice to receive feedback. I'm glad the tutorial is helpful.

rating

madahmani: 3 Years, 10 Months, 3 Weeks, 1 Day, 2 Hours, 17 Minutes ago

Applying this tutorial to a one single text input may be easy to apply but I tried with a whole form with many elements and it does not work.
I tried everything without any luck.

rating

this_is_me: 3 Years, 1 Month, 2 Weeks, 5 Days, 14 Hours, 44 Minutes ago

Excellent Tutorial. First time I could apply server-siede validation to an existing form working. I needed the step to step explanation to understand the procedure.

Kate Ford: 3 Years, 1 Month, 2 Weeks, 5 Days, 13 Hours, 55 Minutes ago

Hi this_is_me. We are so happy to know the tutorial's step-by-step instructions were helpful. Thank you for letting us know.

rating

Team WebAssist: 3 Years, 1 Month, 2 Weeks, 5 Days, 11 Hours, 19 Minutes ago

madahmani, We would need more details to assist you with what is not working. Please click Help in the main menu and we can help you via our technical support forums.

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.