Main page

Data Entry with Input Mask

Description

This example shows how to create a form with input mask fields.

Usage

To add a new user:

  1. Click on the Add User Link.
  2. Enter values for the First name, Last name, Email, Phone work and SSN fields.
  3. Click on Submit Button to save the information. An error message will be shown if the values in the Email, Phone Work or SSN fields don't match their respective masks.

To modify a user's information:

  1. Select a user by clicking on the his\her first name in the user list.
  2. Perform the same steps as when adding a new user.

Steps to recreate

  1. Create a HTML table with two columns.
  2. In the left column cell of the HTML table, use the Grid Builder to create the List of Users Grid based on the users table and its five columns: first_name, last_name, email, phone_work and user_SSN.
  3. Change the first_name field type from Label to Link, then set the current page as the page name in its Href Source property. Also add a Link Parameter with the following property values: Data Source Type = DataSource Column, Parameter Source = user_id and Parameter Name = user_id.
  4. Add a Add user Link at the bottom of the Grid and set the current page as the value of it's Href Source property. Then enter user_id in it's Remove Parameters property.
  5. In the right column cell of the HTML table, use the Record Builder to create the Add/Edit Users Record form which is based on the following fields of the users database table: first_name, last_Name, email, phone_work and user_SSN. In Step 3 of the Record Builder, check the following options: Allow Insert, Allow Update, Allow Delete and Allow Cancel.
  6. Set the Required property of first_name and last_Name Text Boxes to Yes.
  7. Select Email in the Input Validation property of the email Text Box.
  8. Add a Validate Entry action to the On Load client event of the phone_work Text Box. Set the Required property to True, the Minimum Length and Maximum Length properties to 14 and the Input Mask property to (000) 000-0000.
  9. Add a Validate Entry action to the On Load client event of the user_SSN Text Box. Set the Required property to True, the Minimum Length and Maximum Length properties to 11 and the Input Mask property to 000-00-0000.
  10. Add a Validate Form action to the On Submit client event of the Record form so as to validate the Required value and the Minimum and Maximum Length of the field values.
  11. Add a Validate Phone action to the On Validate event of the phone_work Text Box.
  12. Add a Regular Expression Validation action to the On Validate event of the user_SSN field. Set the Control Name property of the action to user_SSN, the Regular Expression property to ^[0-9]{3}-[0-9]{2}-[0-9]{4}$ and enter the following value into the Error message property: Invalid SSN format in SSN field.
  13. Make cosmetic changes as needed, by modifying the text and captions within the HTML.

Database Tables used

Database: Internet

Table: users

Programming Notes

The Validate Entry action in the On Load client event of the Phone Work and SSN Text Boxes is used for formatting values based on a mask.

The Validate Form action in the On Submit client event of the Record form is used to initiate validation of the fields in the form.

The On Validate event in the Phone Work Text Box is used for mask value validation of the field, in this case: (000) 000-0000.

The On Validate event in the SSN Text Box is used for mask value validation of the field, in this case: 000-00-0000.