Tech Tip: How to Validate a User Email Address

If you have an app that allows users to create their own user profiles, you may want to consider adding email validation. When a user submits an email address via a registration Web Form, your app can send an acknowledgment email with a personalized validation hyperlink. The end-user must go to their email account and click on that hyperlink to activate their profile. This way you are certain that you have a valid email address for that user.

Steps to create an email address validation DataPage:

1. Prepare your authentication table and filtered authentication view

Add verification fields to your authentication table

1. In the Caspio Bridge Explorer window go to the Tables view and select your authentication table.
2. Open the Design view by clicking the Design button.
3. Click on the New Record button in the toolbar. In this example, we named this verification field “Email_Verified”.
4. Select Yes/No as the data type.

To create the hyperlink that will be sent to your end-user’s email account we are also going to add another field. This field will hold a GUID or Globally Unique Identifier. This GUID will be automatically generated by the registration Web Form, and will be used by the validation Update Form to locate the end-user's profile record. Set the data type to Text(255) and mark the field as Unique.

Base your Web User Authentication on a filtered view of your authentication table

Now we are going to limit access to your DataPages to only allow end-users who have verified their email address. This is accomplished using a filtered view of the authentication table. In the Explorer window, go to the Views view. In a filtered view of the authentication table only validated user profiles will be visible.

1. Click the New View button.
2. Name your view.
3. Select your authentication table and move it to the right-hand panel using the arrow button.
4. Click Next.
5. In the Fields panel locate and select your Yes/No verification field (In our example, Email_Verified)
6. Click Filter data by this Field, the second checkbox under Field Options.
7. Check the Value checkbox.
8. Click Finish to save your view.

Now this view will only include records where the email address has been marked as verified. Use this view as your authentication table to implement Web User Authentication.

2. Create the validation Update Form

Create an Update Form to find and validate the user’s record

Now that the extra fields have been added to the authentication table, we can create and deploy the validation Update Form. We’re going to create this Web Form before the registration Web Form so that we can note the hosting web page URL. We are going to need this URL to write the acknowledgment email at the end of the registration Web Form.

1. In the Explorer window, go to the DataPage view.
2. Click New and select Update Form.
3. Choose the authentication table as the base table (data source) for this DataPage.
4. Enable advanced options and parameters.
5. Click Next.

To locate the user’s record we are going to receive a GUID value from a query string parameter in the URL.

1. Select your GUID field from the Unique ID field dropdown field.
2. Change the parameter name to match the fieldname of your GUID field. Be sure to remember this parameter fieldname (GUID) as it will be needed later when we create the hyperlink in the acknowledgment email.
3. Click Next.

Now we’re going to configure the Update Form to change the verification field value to “Yes”.

1. In the Select Fields screen select your verification field (in this example “Email_Verified”) and move it to the right-hand panel using the arrow button.
2. Click Next.
3. From the Form element dropdown field select Hidden.
4. Make sure the default value checkbox is checked.

Now when your end-user presses submit on this Web Form their profile will be activated.

Add an auto-submit JavaScript (optional)

If you would like the validation Update Form to submit itself automatically you can add a line of JavaScript to an HTML block in the DataPage.

1. Click the Insert button at the lower right-hand corner of the DataPage Elements panel.
2. Select HTML block to add this sections.
3. Copy and paste the JavaScript from the end of this article into the HTML Block panel.

Redirect the end-user after verification

On the last page of the DataPage wizard you can choose a destination page. In this example, after the Update Form has been submitted the end-user is directed to a confirmation web page. Press Finish to save your DataPage.

Deploy the Update Form to a web page

Deploy the Update Form to a web page and note the URL. We will be using this URL in the next step to create the hyperlink contained in the acknowledgment email.

3. Create a registration Web Form with an email hyperlink

Create a registration Web Form

1. Click on the New DataPage button and create a Submission Form.
2. Click Next.
3. Select your authentication table as a base table (data source).
4. Proceed to the Select Fields screen add the email field and the GUID field to the included fields.
5. Press Next.
6. In the Configure Fields screen select your email field.
7. Select Email from the Form element dropdown field.

Now we will configure the GUID field to automatically create a GUID value.

1. Select your GUID field from the DataPage Elements panel.
2. Select AutoValue from the Form elements dropdown field.
3. From the AutoValue Type dropdown field, select Random Unique ID.
4. From the Format dropdown field select For Application Use. This will automatically fill your GUID field with a 128-bit Globally Unique Identifier.

On the last screen of the DataPage wizard configure your destination page options. In this example we changed the display message to alert the end-user that they will need to check their email to complete their registration.

Configure the automatic email

On the last page of the DataPage wizard, go to the Automatic Email Options section. Click on Acknowledgment email to email address submitted in form, and select your authentication table’s email field from the dropdown field. Click Next.

On the Acknowledgment Email screen, we will configure the acknowledgment email to link to the validation Update Form’s host web page.

1. Enter an email address into the From field. The email address can be either a real email address from your organization, or a “no reply” address (for example: noreply@bayarealandmark.com) to indicate that the email address isn’t valid.
2. Enter a subject in the subject field to indicate that action is still required from your end-user.
3. Select HTML from the Email format dropdown field on the bottom of the screen.
4. Write a message in the message panel using HTML.

Now we will need to create a hyperlink to the validation Update Form host web page. First write out an HTML hyperlink to the URL of the host the web page. You can copy the HTML hyperlink syntax from the bottom of this article. Be sure to change the URL in the sample to your validation Update Form web page URL.

Now we will add the user’s GUID to the URL as a query string parameter.

1. After the URL add a question mark (?).
2. Type the parameter name of your GUID field followed by an equal sign (GUID=).
3. Select your GUID field in the Insert fields dropdown field.
4. Click the Insert button.
5. Close the quotation marks and the tag

Make sure that the entire URL including the query string is contained in quotation marks. The format of the hyperlink should follow the example below. Click Finish to save your DataPage.

Deploy and Test

Now you can deploy your registration Web Form to your web page. Test the system by registering. Be sure to check your Junk Mail folder for the acknowledgment email. It is a good idea to suggest your end-users do the same. Click on the hyperlink in the acknowledgment email. Verify the authentication view to be sure your profile has been validated. Now you can be sure that you have a valid email address for each new end-user profile. If you have existing end-user profiles, you may want to mark them as already validated.

Reference HTML and JavaScript:

<!–HTML Hyperlink Syntax–>

<a href="URL">Link Text</a>

<!–Auto-Submit JavaScript–>

<script type="text/javascript"> setTimeout('document.getElementById("caspioform").submit()',1);

</script>