Check e-mail and phone: Validate Form

When adding data in a table through HTML forms, you have no way to control what the user enters. Now, with MX Form Validation you can define specific rules for each form element. If you have the MX Kollection 3 bundle, MX Form Validation is included.

When managing contacts for a company or person, you want to make sure that the contact person is added correctly: with a valid e-mail address and phone number. MX Form Validation allows you to add rules for the e-mail and phone fields. If JavaScript is enabled in the browser, the check takes place on the local machine, saving a round-trip to the server.

To add these rules, you will have to follow the instructions below. First off, open the contacts insert page.

If a Validate Form server behavior has not been added by the wizard - the third step, you will have to apply the Validate Form server behavior. To access it, click on the Plus (+) button of the Server Behaviors tab, then select MX Kollection -> Form Validation -> Validate Form. If the Server Behaviors tab is not visible, you can open it from Window -> Server Behaviors. If the server behavior already existed, simply double click its name to edit it.

The Validate Form dialog box will open at the Basic tab. The Advanced tab is of no interest at this time, as all necessary options can be set here.

In the Columns grid, all fields that have a form element counter-part are displayed. Beside the name, the submit type, the required state and the validation format are displayed. You'll have to select each field to modify from the grid, and only then use the fields below to modify its rules.

 

To add validation for the e-mail address and phone number, follow the next steps:

  1. Select the email_con field from the grid. Add the following rule:
    · The e-mail address should be mandatory when entering contact details, so check the Required checkbox.
    · From the Validation Format drop-down menu select E-mail Address. This will force the user enter addresses that respect the format name@server.domain
    · As rule elements are added to a field, the grid updates to reflect the changes.
  2. The second element to add validation rules to is the phone_con field. Select this field in the grid, and follow the next steps:
    · The phone number should not be mandatory when adding a new contact, so the Required checkbox should remain unchecked.
    · From the Validation Format drop-down select Phone number. This way only phone numbers can be entered. If you need extra options, you can set a minimum and maximum number of characters that the user can enter so that the number is valid.


                             

  3. Next to the regular validation options, you can customize error messages for each field that has validation rules applied. Just select the field from the grid, check the Custom message checkbox and you can enter your own text in the Error message text field.

Once you're done defining the validation rules for the desired fields, click on OK to apply the server behavior. You will notice some changes in the page design, as next to each field that has a validation rule applied some text is shown. This is where the mandatory format and the required text will be displayed in the browser.

After ensuring that your users can not enter bad information, you can take one more step to make your web application easier: learn how to automatically delete the contacts associated with a company, when the company itself is deleted. Check this out in the next topic.