Power Pages Confirm Email Address Fields

It has become standard practice on intake forms to have an email confirmation field, basically, entering your email address twice to help ensure that you’re typing it correctly and not fat fingering it.  While the out of the box experience of Pages does not provide this sort of email validation, there is a method in which you can create your own.

For this example, let’s leverage the Contacts out of the box Profile Web Form.  Let’s open the form and create a new email address field called Confirm Email Address.

Take note of your fields schema name.

Once created, let’s place it below the out of the box email address field.  Then Publish the form.

Now, lets navigate to Portal Management and open the Profile Web Page and open the Localized Content record.  Click on the Advance Tab and paste the following JavaScript code in the JavaScript text field.

 if (window.jQuery) {

   (function ($) {

      $(document).ready(function () {

        var primaryemail = "emailaddress1";

        var confirmemail = "crab0_confirmemailaddress";

        var validationmessage = "Primary Email and Confirm Email must match";

        if (typeof (Page_Validators) == 'undefined') return;

        var newValidator = document.createElement('span');

        newValidator.style.display = "none";

        newValidator.id = primaryemail+"Validator";

        newValidator.controltovalidate = primaryemail;

        newValidator.errormessage = "<a href='#"+primaryemail+"_label'>"+validationmessage+"</a>";

        newValidator.validationGroup = "";

        newValidator.initialvalue = "";

        newValidator.evaluationfunction = function () {

            // check if primary email matches confirm email

            if ($('#'+primaryemail).val() == $('#'+confirmemail).val()) {

                return true;

            } else {

                return false;

            }

        };

        Page_Validators.push(newValidator);

        $("a[href='#"+confirmemail+"_label']").on("click", function () { scrollToAndFocus(confirmemail+'_label',confirmemail); });

      });

   }(window.jQuery));

}

Update the email address schema name on line 5 to match yours from the previous step.

Click Save and Close.

Navigate to Page Studio and click Preview | Desktop to flush the cache.  Let’s now test this by launching the portal and signing in.  Browse to the Profile page.  You should now have our new Confirm Email Address field on the form.

Now, lets enter an email address that does not match the email address in the E-mail field and click the Submit button.

What you should now get is a validation message preventing the form from being submitted.

Now, set the confirm email address field to match the first and click Submit.  This should now pass validation and submit successfully.