Web development tutorial

Tutorial created by Ray Borduin, WebAssist

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

Print tutorial
Share this tutorial

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.

next section

What you need to start

Form Toolkit or Data Bridge
Dreamweaver CS3, CS4 or CS5
Dreamweaver site defined
PHP form to add validation to

next section

Creating the class

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

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

next section

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

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

next section

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

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.
Highlight the text.
From the WebAssist menu, choose Forms > Validation > Validation Show If.
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.
From the Validations fail menu, choose the validation you just created.
Click the Add ( ) icon.
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.

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

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

The code for the Validation will be highlighted.
Select the highlight area in Code view, and press Ctrl (Cmd) C to copy this code.
Place your cursor after the ID of the text field you wish the CSS class to apply to.
Press Ctrl (Cmd) V to paste the code.
In place of the line Your entry was invalid, insert the code for your class. For this example, this is class="fail".
Press Ctrl (Cmd) S to save your page.
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.

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.

Sign in to add comments

0 ratings | Sign in to rate this tutorial