Warning: We no longer develop features for this version of SKY UX, and we recommend that you use the latest version instead. This site describes the AngularJS (1.x) implementation of the SKY UX framework. We still support this version, but it is in maintenance mode. For more information, see developer.blackbaud.com/skyux.

Email validation

The email validation directive validates email addresses in input fields.

Email validation settings

  • ng-model — Specifies an object to bind the email address value to on the input field.
  • type="email" — Indicates that email validation can be used.

Demo

Markup

<div ng-controller="ValidationTestController as validationCtrl">
    <div class="row">
        <div class="col-md-12">
            <div class="tile-form">
                <form name="validationCtrl.validationTest">
                    <div class="form-group">
                        <div class="input-group">
                            <label for="testField1">Email address </label>
                            <input class="form-control" type="email" name="testField1" ng-model="validationCtrl.email" bb-email-validation />
                            <label class="error" ng-show="validationCtrl.validationTest.testField1.$dirty && validationCtrl.validationTest.testField1.$error.email">
                            Invalid email address format!
                            </label>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

</div>

JavaScript

/*global angular */
(function () {
    'use strict';

    function ValidationTestController() {
        var self = this;
        self.email = '';
    }

    angular.module('stache').controller('ValidationTestController', ValidationTestController);
}());