Angular-Validity Example

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/master/angular-validity.js"></script>
<section ng-controller="ExampleCtrl">
    <form name="form" ng-submit="login(form)" autocomplete="off">
        <div class="panel panel-info">
          <div class="panel-heading">
            <h3 class="panel-title">Angular-Validity Example</h3>
          </div>
          <div class="panel-body">
            <p>
            Field4 is only required if Field1, Field2, and Field3 contain values.
            </p>
            <p>
            Things to try:
            </p>
            <ol>
              <li>Click submit without any values in the fields: the form will post, because it's valid</li>
              <li>Add values to fields 1-3 and click submit: the form will not post, because Field4 is now required</li>
              <li>Add values to all fields and click submit: the form will post, because it's valid</li>
            </ol>
          </div>
        </div>
        <div class="form-group well">
            <div class="form-group">
                <label for="field1" class="control-label">Field1</label>
                <input type="text" name="field1" ng-model="field1" class="form-control"/>
            </div>
            <div class="form-group">
                <label for="field2" class="control-label">Field2</label>
                <input type="text" name="field1" ng-model="field2" class="form-control"/>
            </div>
            <div class="form-group">
                <label for="field3" class="control-label">Field3</label>
                <input type="text" name="field1"...

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.login = function (form) {
        validity.validate(form).then(function () {
            // Form is valid. Do something...
            alert("Form is valid!");
        });
    };
}]);