Extending Email Address Validation in the Shopping Cart Checkout – Active Commerce Help Center

The contact email address field in Active Commerce checkout is using standard Angular validation that is derived from the regex used in Chromium. That regex does not support top level domains. You can read more in the Angular documentation.

You can implement more strict validation following these steps:

Use the skinning system to override Checkout-Billing-Contact.ascx
In your override, modify the email input field and add a new attribute, "ng-pattern":

<input type="email" ng-model="contact.Email" name="email" ac-enter="next()" required ng-pattern="pattern" />

Next, create an extension to the BillingContactCtrl angular controller. Save this new extension under your skins folder in "scripts\checkout\components"

angular.module('checkout.components')

    .controller('MyNewBillingContactCtrl', ['$scope', '$controller', function ($scope, $controller) {

        $controller('BillingContactCtrl', { $scope: $scope }); // Inherit from base 

        // INIT
        $scope.pattern = /^[a-z]+[a-z0-9._]+@[a-z]+\.[a-z.]{2,5}$/;
}]);

Notice that as an example, we've called this controller, "MyNewBillingContactCtrl"
Now, back in your override of Checkout-Billing-Contact.ascx, change the angular controller to your extension:

<div ng-controller="MyNewBillingContactCtrl" class="billing-contact checkout-component">

You'll now have enahcned validation on that email field based on the regex used in the Angular extension.

Please note that the regular expression used here is only an example. Writing an all-inclusive email regex is difficult. You can do some heavy reading on Stack Overflow.

We'd recommend doing a little research and picking or writing a regex that best meets the needs of your business and user base.

Comments