Using Mailgun’s email address validation service with AngularJS

(Note: This article has been updated to use AngularJS 1.0.8 and Bootstrap 3.0.0. If you are using earlier versions the syntax may be slightly different.) Email address validation is hard. The RFC’s are complex, implementations of them vary, and regular expressions you find lying around the internet fall short. In fact, don’t tell anyone, but the validation we do on our web site today is not correct by a long shot. But it has decent coverage over the most common address formats that normal people use.

We want people to use our service. So, we make it as easy as possible to sign up. Investors only need to provide an email address and password to get started. We don’t make an investor type either their email address or their password twice. A typical verification email is employed after an investor signs up on the site and it’s very straightforward to reset your password. Of course, we see a > 0 bounce rate on those verification emails. Even the most well intentioned person types things wrong occasionally. The validation service Mailgun announced today should be a step in the right direction, and we’re excited to try it out!

Our web application uses AngularJS on the front end, and we have spent some time tweaking the user experience of its form validation. We’ll certainly be testing out the Mailgun API, so we decided to see how it might fit in with our form UX.

Andy threw together some code loosely based on the Mailgun jQuery example project. If you’re eager to get started, have a look over on our Github or play around with the Plunker.

The tricky part about a validation system such as this is that it is asynchronous by necessity as you are calling a remote service. You need to provide status to the user, or confusion will ensue. We disable the default form validation, and use the AngularJS system instead.

In order to work around the asynchronous problem we set both an “in progress” and “is valid” validation flag on the model and adjust the UI accordingly. Rather than re-create the functionality, we use the Mailgun jQuery library as-is. We simply wrap the callbacks to modify the state of our AngularJS form validators. Angular magic takes over from there, and the form’s $valid flag remains false until both the call to Mailgun is complete and the email address is valid. The user also sees status updates as to what is going on.

Use the directive by adding a rc-mailgun-valid attribute to your email input.

   <input class="form-control" name="email" type="text" placeholder="Email" 
          ng-model="session.email" rc-mailgun-valid />

We control the messaging to the user by simply using the ng-show directive to display different html based on the progress of the transaction. Did the user enter anything? Is the address valid? Are we in progress validating the address? Was there an error?

   <span class="help-block">
     <span ng-show="loginForm.email.$error.required">Required</span>
     <span ng-show="loginForm.email.$error.rcMailgunEmailValid"> Invalid Email Address</span>
     <span ng-show="loginForm.email.$error.rcMailgunInProgress"> Validating Email Address</span>
     <span ng-show="rcMailgun.mailgunStatus"> Validation Error: {{ rcMailgun.mailgunStatus }}</span>
   </span>

And, finally, disable the submit button until the form is valid, which includes waiting for the call to the Mailgun validation service to complete.

   <button type="submit" class="btn btn-primary" value="Login" title="Login" 
           ng-disabled="!loginForm.$valid">
     <span>Login</span>
   </button>

And there you have it. A much-more-accurate email address validation system, able to be applied to your AngularJS powered form by just adding a couple directives. For a better UX, tie this in with rc-submit and rc-attempt as described in our last dissertation on AngularJS form validation.

Available on Github

Play with it on Plunker