1

I am creating a custom form on a Salesforce Marketing Cloud Landing Page. This page will have information such as Email address, first name and last name pre-filled from an email, however there will be some cases where emails can be entered by the customer. What is the best way to validate email addresses on form submit? E.g. a regex to look at overall structure or is there a better way?

1
  • 1
    You can use a simple built in HTML5 feature, if you just want to validate the syntax of the email address and NOT against any existing email address... Following link might help as well..https://stackoverflow.com/questions/46155/how-to-validate-an-email-address-in-javascript Feb 3, 2020 at 8:38

1 Answer 1

2

As described, HTML5 has the "pattern" attribute that you can use to validate form fields on the frontend. Frontend validation is good to improve the usability of the page for the user.

You can utilize the RegexMatch() AMPScript Function to mirror this logic on the backend. Backend validation should be employed as a security measure, should someone try to circumvent the form frontend somehow.

Also ensure that you follow the practices outlined in this trailhead module: https://trailhead.salesforce.com/en/content/learn/modules/marketing-cloud-security/secure-your-web-and-landing-pages


Before starting your implementation you have to understand that the regex pattern employed by HTML5 and the one employed by AMPScript differ slightly:

This is the email validation employed on marketing cloud Cloudpages (smart capture) as you would use it in HTML5:

[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*

The same pattern for AMPscript usage requires the start and end markers: ^ and $

^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$

So for each complete validation you need two patterns, HTML5 for frontend, AMPScript for backend.

Hence, I suggest to setup a data extension in the following schema. Here, you can store the pair of validation regexes next to the relevant parameter name (e.g. "email") centrally, so you can always reference them from a central DE on all your forms and handlers systemwide, and manage them also in case of changes in one place.

DE Schema (Name = "RegexPatterns") and example row

parameter (=primary key),patternHTML5,patternAMPscript

Email,[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*,^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$

Next, ensure that your frontend (form) references this DE to pull the Regex pattern in its HTML5 version (stored in field "patternHTML5") into the pattern attribute of your input field:

%%[
/* Form */
/* regex definition for frontend validation with html5*/

/* define the patterns for all input fields that need FRONTEND validation on your form, assuming the DE is called RegexPatterns and is in the current BU. */

SET @HTML5_patternForEmail = Lookup("RegexPatterns","PatternHTML5","parameter","Email")
/* add more lookups here if necessary */
/* end regex definition */
]%%

<input type="text" pattern="%%=v(@HTML5_patternForEmail)=%%">

Now you have an input text field that uses the pattern from the Data Extension on the frontend which validates an email address.


on your handler page, you employ RegexMatch to do the same thing, but using the pattern in its AMPScript Variant (with ^ and $) from the same DE. In this example, this is just done for one field, but of course it makes sense to use loops here, and get all incoming parameters on the page, not just "email", and repeat the matching for all fields.

You could also add a condition to handle empty inputs as a successful regex check, depending on the requirement. By default, the regex matches potentially incoming empty strings against the pattern, and thus produces an error if empty input comes from the form.

%%[
SET @email = RequestParameter("email") 
SET @patternName = "email" /* this references the value of the field "Pattern" in the RegexPatterns DE */

SET @regexResult = RegExMatch(@email, Lookup("RegexPatterns","PatternAMPScript","parameter",@patternName), 0)

/* reading help: "regex-match the value of the incoming parameter "email" against the data extension "RegexPatterns" / field "PatternAMPScript" where the the field "parameter" has the value "email")

 IF empty(@regexResult) THEN /* RegExMatch found no match >> invalid */
     SET @regexCheckFailedValidation = true
 ENDIF


IF @regexCheckFailedValidation == true THEN
    /* validation error. no further processing. display error page or perform other error operations */
    ]%%
    error
    %%[
ELSE
    /* regex validation successful: continue processing */
    ]%%
    success
    %%[
ENDIF
]%%

With this, you have a central DE to store and maintain your validations for form and handler (frontend and backend), plus a blueprint to leverage HTML5 validation on the frontend and AMPScript validation on the backend.

Hope this helps :)

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .