<script>
  function ValidateCtrl($scope) {
    $scope.notBlackListed = function (value) {
      var blacklist = ['bad@domain.com', 'verybad@domain.com'];
      return blacklist.indexOf(value) === -1;
    }
  }
</script>
<section id="validate">
  <div class="page-header">
    <h1>Validate</h1>
  </div>
  <h3>What?</h3>

  <div class="row">
    <div class="span6">
      <p>The <code>ui-validate</code> directive makes it very easy to create custom validator expressions.</p>

      <div class="well" ng-controller="ValidateCtrl">
        <form name="form">
          <h3>e-mail</h3>
          <input name="email" placeholder="email" type="email" required ng-model="email" ui-validate="{blacklist : 'notBlackListed($value)'}">
          <span ng-show='form.email.$error.blacklist'>This e-mail is black-listed!</span>
          <br>is form valid: {{form.$valid}}
          <br>email errors: {{form.email.$error | json}}

          <h3>password</h3>
          <input name="password" type="text" required ng-model="password" placeholder="password">
          <input name="confirm_password" type="text" required ng-model="confirm_password" ui-validate=" '$value==password' " ui-validate-watch=" 'password' " placeholder="confirm password">
          <span ng-show='form.confirm_password.$error.validator'>Passwords do not match!</span>
          <br>is form valid: {{form.$valid}}
          <br>password errors: {{form.confirm_password.$error | json}}
        </form>
      </div>
      <h3>Why?</h3>

      <p>AngularJS comes with several built-in validation mechanism for input fields (ngRequired, ngPattern etc.) but using an arbitrary validation function requires creation of custom formatters and / or parsers. The ui-validate directive makes it easy to use any function(s) defined in scope as a validator function(s).</p>
    </div>
    <div class="span6">
<pre class="prettyprint">
&lt;input name="email" ng-model="email"
<strong>ui-validate</strong>="{blacklist : 'notBlackListed($value)' }"&gt;
Is e-mail black-listed? {{!!form.email.$error.blacklist}}

&lt;input name=&quot;password&quot; required ng-model=&quot;password&quot;&gt;
&lt;input name=&quot;confirm_password&quot;
<strong>ui-validate</strong>=&quot; '$value==password' &quot;
<strong>ui-validate-watch</strong>=&quot; 'password' &quot;&gt;
Passwords match? {{!!form.confirm_password.$error.validator}}

...

$scope.notBlackListed = function(value) {
var blacklist = ['bad@domain.com','verybad@domain.com'];
return blacklist.indexOf(value) === -1;
}
</pre>
      <h3>How?</h3>

      <p>Create an expression inside a string. If it evaluates to
        <code>true</code> the input is valid, the rule name will be <code>validator</code> by default.</p>
<pre class="prettyprint">ui-validate=" 'validateFoo($value)' "
Input is valid: {{!!myForm.myInput.$error.validator}}</pre>
      <p>
        <strong>Or</strong> define multiple rules by creating an object where the key is the rule name and the value is the expression string.
      </p>
<pre class="prettyprint">ui-validate="{foo:'valFoo($value)', bar:'$value == someVar'}"
Foo rule passes: {{!!myForm.myInput.$error.foo}}
Bar rule passes: {{!!myForm.myInput.$error.bar}}
</pre>
    </div>
  </div>
</section>
