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

Web development tutorial

Changing styles to form elements with validation

Tutorial created by Team WebAssist

Categories: Data Bridge

rating

Displaying alerts when validating form fields is very common, but a more advanced technique is to apply a unique style to the actual form element to highlight whether it passed or failed validation. In this example, when the validation fails for a text field, the color will change. To achieve this, we are going to use the Validation Show If server behavior provided in Form Toolkit. However, instead of applying this to an element on the page, we are going to apply a CSS class to the input field when validation fails.

arrow downWhat you need to start

  1. Form Toolkit or Data Bridge
  2. Dreamweaver CS3, CS4 or CS5
  3. Dreamweaver site defined
  4. PHP form to add validation to

arrow downCreating the class

Before applying your validation, you will want to create the class that you want to apply to your text field.

  1. From the CSS styles panel, choose New CSS Rule.
  2. Select the Class radio button.
  3. In the name field enter .fail.
  4. Click OK.
  5. Choose the Background category.
  6. Specify a background color you wish to apply to the text field.
  7. Click OK.



arrow downApplying your Validation

The next step is to apply the server-side validation that would validate our text field. If you already have validation applied to your form, you can skip this step.

  1. From the WebAssist menu, choose Forms > Validation > Server Validations.
  2. From the Validation type menu, choose the appropriate validation type.
    For this example we chose Required/Not Blank/Selection Made.
  3. Click the Server Variable lightning bolt.
  4. Select your text field and click OK.
  5. Click the Add icon to add the server variable to the list. This allows you to validate multiple fields with the same validation.
  6. Click OK.



arrow downAdd the Show If Behavior

Once this is done, we will duplicate this code to also display our Class when validation fails. For this example we are going to apply our validation to show the text "Your entry was invalid" beside the text field.

  1. Next to the text field enter Your entry was invalid.
    This will be the error message that appears and can be whatever you would like.
  2. Highlight the text.
  3. From the WebAssist menu, choose Forms > Validation > Validation Show If.
  4. In the Validation page field, specify the page that is being validated.
    You need to select the page that the validation is being applied to. This is not always the page that contains the form but could be the page that the form submits to.
  5. From the Validations fail menu, choose the validation you just created.
  6. Click the Add ( ) icon.
  7. Click OK.


When you click the OK button, Form Toolkit will add code to check when to display the highlighted text. We are going to use the same code to add a class to your input field.

arrow downApplying validation to CSS

Your Validation Show If Server Behavior currently only applies to the text that was highlighted. We now want to copy the code for this server behavior, and then replace the text with the information for the class.

  1. Select the Code view button.
  2. In the Server Behaviors panel, select the Validation Show If Server Behavior.

    The code for the Validation will be highlighted.
  3. Select the highlight area in Code view, and press Ctrl (Cmd) C to copy this code.
  4. Place your cursor after the ID of the text field you wish the CSS class to apply to.

  5. Press Ctrl (Cmd) V to paste the code.
  6. In place of the line Your entry was invalid, insert the code for your class. For this example, this is class="fail".

  7. Press Ctrl (Cmd) S to save your page.
  8. Press F12 to preview your page in your browser.


For our example, if a user leaves the text field blank and clicks 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

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.