Universal Form Validator ASP Manual

Advanced: Registration Form Validation with the DMXzone Universal Form Validator

Introduction

In this tutorial we will show you how to add form validation to your Registration form using the DMXzone Universal Form Validator ASP, allowing your users to get immediate feedback on their entries.

How to do it

1.Create your Form
Create your form or insert a form you have prepared beforehand into your ASP page. Make sure you have a Name for each field and an ID for each form you want to use the validator for since this will be very important when you start to attach different validation options to each field.

2.Insert the Server Behavior
Find the DMXzone Universal Form Validator ASP Server Behavior under the Server Behaviors tab.


Note:  Server Behaviors generate server code (ASP/PHP) and are executed on the server side, while Regular Behaviors are just JavaScript functions executed on the client side.

3.A new popup with the DMXzone Universal Form Validator ASP server behavior interface appears:

4.Main Settings
Here at the Main tab, under General you have to select a name for the Validator's instance in the Name field.



Under "Validation" select when you want to validate the field: On Field Change or On Form Submit. You can also choose both if you wish. Validating On Field Change will activate the validation when something is entered in the field and On Form Submit will validate the field when the form is submitted.

Note: the form will always be checked server side after submitting

5.Form Styling
Here you have two options. You can style the look of your field by using all the settings provided or you can attach your own CSS. For this tutorial we will use the styling available from the dialog.

The Element Focus Style pertains to the style of the field before when the user "Focuses" (clicks) on it.
The Element Valid Style pertains to the style of the field after validation when the entered information is valid
The Element Invalid Style pertains to the style of the field after validation when the entered information is invalid.
Here are the settings we have chosen:

6.Validation
At the Validation tab, you will see all your fields' IDs, prefixed with the form's ID, which are recognized by the Universal Form Validator under Form Fields no matter how many forms you have defined on the page.


Select the field you want to validate and add it with the arrow.


It now appears under Validation Rules. Here we can do several things.

We set the Validation Rule .
In the Rule field you can choose where to validate the entered information. The Required checkbox should be checked to specify that the field should be filled out. You have a wide range of choices here. To learn more about each one refer to the Reference: Validation chapter.

For our tutorial we will choose 'Equal to' for our passwords login fields. We have our first password field in which the user will choose his/her password and the second in which he/she will retype it for verification.

Choose your first password field from the list of Form Fields – form1.password. Press the arrow to add it to the Validation Rules box and then do the same for the second password field – form1.password2.


Select form1.password2 from the Validation Rules table and under it, choose your Validation Rule, in our case "Equal to" and from the submenu Equal to choose form1.password.


Under the rules, you can choose if you want a Custom Error Message to appear if there is a mismatch. We put a check next to it and write "Sorry try again"


We leave the Conditional checkbox unchecked for now.

7.Input Masks
Give a particular field an Input Mask to set a specific format in which the user has to enter his information. For example we will give our form1.login field a Social Security Number Mask Type.


The Format of the Social Security Number will be Bulgarian since we are making the current form for users in Bulgaria. Now the user will have to enter his/her SSN only. If they enter anything else they will get an error message.

You can read more about each type of Mask at the Reference: Input Masks chapter.

So far, your result should look like this: