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.
Before applying your validation, you will want to create the class that you want to apply to your text field.
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.
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.
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.
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.
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.
Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.
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.