Angular-Validity Example: Getting Started

https://angular-validity.readme.io/docs/getting-started

by Jason Pierce

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://rawgit.com/2Toad/Angular-Validity/v1.4.2/angular-validity.js"></script>
<section ng-controller="ExampleCtrl">
    <form name="form" ng-submit="example(form)" autocomplete="off">
        <div class="form-group well">
            <div class="form-group">
                <label for="email" class="control-label">Email</label>
                <input type="text" name="email" ng-model="email" class="form-control"
                    validity="required email"
                    validity-event="blur"
                    validity-message-required="Your email address is required"
                    validity-message-email="Please enter a valid email address" />
                <validity-label for="email"></validity-label>
            </div>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
        <button type="button" class="btn btn-default" ng-click="reset(form)">Reset Validation</button>
    </form>
</section>

SCSS

section {
    margin: 5px;

    .form-group {
        &.well {
            margin-bottom: 5px;
        }
    }
}

JavaScript

angular.module("exampleApp", ["ttValidity"])

.config(["validityProvider", function (validityProvider) {
    validityProvider.options({
        style: "Bootstrap3"
    });
}])

.controller("ExampleCtrl", ["$scope", "validity", 
    function ($scope, validity) {
        $scope.reset = validity.reset;
        
        $scope.example = function (form) {
            validity.validate(form).then(function () {
                // Form is valid. Do something...
                alert("Form is valid!");
            });
        };
    }
]);