Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
  
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.js"></script>
  <script src="https://rawgit.com/dscheerens/angular-conditional-validation/master/dist/angular-conditional-validation.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
  
<body ng-app="demoApp">
  <div class="container">
    
    <h1>Angular conditional validation demos</h1>
    
    <div class="panel panel-default">
      <div class="panel-heading">
         <h2 class="panel-title">Simple on/off validation</h2>
      </div>
      <div class="panel-body">
        <form name="form1" ng-controller="Form1Controller as ctrl">
         <div class="form-group" ng-class="{'has-error': form1.$invalid}">
           <label for="exampleInputEmail1">Text input</label>
           <input
                  type="text"
                  class="form-control"
                  name="field"
                  ng-model="ctrl.textValue"
                  required
                  ng-minlength="4"
                  ng-maxlength="5"
                  pattern="abcd"
                  enable-validation="ctrl.enableValidation"
                  >
        </div>
          
        <div class="checkbox">
          <label>
            <input type="checkbox" ng-model="ctrl.enableValidation"> Enable validation
          </label>
        </div>
         
        <table class="table table-bordered">
          <tr>
            <th>Validator</th>
            <th>Enabled</th>
            <th>Status</th>
          </tr>
          <tr>
            <td><code>required</code></td>
            <td><status value="!!ctrl.enableValidation" positive="YES" negative="NO"></status></td>
            <td><status value="!form1.field.$error.required" positive="OK" negative="ERROR"></status></td>
          </tr>
          <tr>
            <td><code>ng-minlength="4"</code></td>
            <td><status value="!!ctrl.enableValidation" positive="YES" negative="NO"></status></td>
            <td><status value="!form1.field.$error.minlength" positive="OK" negative="ERROR"></status></td>
          </tr>
          <tr>
            <td><code>ng-maxlength="5"</code></td>
            <td><status value="!!ctrl.enableValidation" positive="YES" negative="NO"></status></td>
            <td><status value="!form1.field.$error.maxlength" positive="OK" negative="ERROR"></status></td>
          </tr>
          <tr>
            <td><code>pattern="abcd"</code></td>
            <td><status value="!!ctrl.enableValidation" positive="YES" negative="NO"></status></td>
            <td><status value="!form1.field.$error.pattern" positive="OK" negative="ERROR"></status></td>
          </tr>
        </table>
          
        </form>
      </div>
    </div>
    
    <div class="panel panel-default">
      <div class="panel-heading">
         <h2 class="panel-title">Individual validator selection</h2>
      </div>
      <div class="panel-body">
        <form name="form2" ng-controller="Form2Controller as ctrl">
         <div class="form-group" ng-class="{'has-error': form2.$invalid}">
           <label for="exampleInputEmail1">Text input</label>
           <input
                  type="text"
                  class="form-control"
                  name="field"
                  ng-model="ctrl.textValue"
                  required
                  ng-minlength="4"
                  ng-maxlength="5"
                  pattern="abcd"
                  enable-validation="ctrl.enableValidation"
                  >
        </div>
          
        <hr>
          
        <div class="checkbox">
          <label>
            <input type="checkbox" ng-model="ctrl.enableValidation.minlength"> Enable <code>minlength</code> validator
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" ng-model="ctrl.enableValidation.maxlength"> Enable <code>maxlength</code> validator
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" ng-model="ctrl.enableValidation['*']"> Enable other validators
          </label>
        </div>
          
        <hr>
         
        <table class="table table-bordered">
          <tr>
            <th>Validator</th>
            <th>Enabled</th>
            <th>Status</th>
          </tr>
          <tr>
            <td><code>required</code></td>
            <td><status value="!!ctrl.enableValidation['*']" positive="YES" negative="NO"></status></td>
            <td><status value="!form2.field.$error.required" positive="OK" negative="ERROR"></status></td>
          </tr>
          <tr>
            <td><code>ng-minlength="4"</code></td>
            <td><status value="!!ctrl.enableValidation.minlength" positive="YES" negative="NO"></status></td>
            <td><status value="!form2.field.$error.minlength" positive="OK" negative="ERROR"></status></td>
          </tr>
          <tr>
            <td><code>ng-maxlength="5"</code></td>
            <td><status value="!!ctrl.enableValidation.maxlength" positive="YES" negative="NO"></status></td>
            <td><status value="!form2.field.$error.maxlength" positive="OK" negative="ERROR"></status></td>
          </tr>
          <tr>
            <td><code>pattern="abcd"</code></td>
            <td><status value="!!ctrl.enableValidation['*']" positive="YES" negative="NO"></status></td>
            <td><status value="!form2.field.$error.pattern" positive="OK" negative="ERROR"></status></td>
          </tr>
        </table>
          
        </form>
      </div>
    </div>
    
    <div class="panel panel-default">
      <div class="panel-heading">
         <h2 class="panel-title">Function based validation condition</h2>
      </div>
      <div class="panel-body">
        <form name="form3" ng-controller="Form3Controller as ctrl">
         <div class="form-group" ng-class="{'has-error': form3.$invalid}">
           <label for="exampleInputEmail1">Number input</label>
           <input
                  type="number"
                  class="form-control"
                  name="field"
                  ng-model="ctrl.numberValue"
                  ng-minlength="4"
                  ng-maxlength="4"
                  pattern="1337"
                  enable-validation="ctrl.enableValidation"
                  >
        </div>
        
        <hr>
          
        <div class="checkbox">
          <label>
            <input type="checkbox" ng-model="ctrl.enableValidation.minlength"> Enable <code>minlength</code> validator
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" ng-model="ctrl.enableValidation.maxlength"> Enable <code>maxlength</code> validator
          </label>
        </div>
          
        <em class="text-muted">Enable the <code>minlength</code> and <code>maxlength</code> validators to enable the <code>pattern</code>validator.</em>
        
        <hr>  
          
        <table class="table table-bordered">
          <tr>
            <th>Validator</th>
            <th>Enabled</th>
            <th>Status</th>
          </tr>
          <tr>
            <td><code>ng-minlength="4"</code></td>
            <td><status value="!!ctrl.enableValidation.minlength" positive="YES" negative="NO"></status></td>
            <td><status value="!form3.field.$error.minlength" positive="OK" negative="ERROR"></status></td>
          </tr>
          <tr>
            <td><code>ng-maxlength="4"</code></td>
            <td><status value="!!ctrl.enableValidation.maxlength" positive="YES" negative="NO"></status></td>
            <td><status value="!form3.field.$error.maxlength" positive="OK" negative="ERROR"></status></td>
          </tr>
          <tr>
            <td><code>pattern="1337"</code></td>
            <td><status value="!!ctrl.enableValidation.pattern()" positive="YES" negative="NO"></status></td>
            <td><status value="!form3.field.$error.pattern" positive="OK" negative="ERROR"></status></td>
          </tr>
        </table>
          
        </form>
      </div>
    </div>
    
  </div>
</body>
​
</html>
 
var app = angular.module('demoApp', ['angularConditionalValidation']);
​
app.controller('Form1Controller', function() {
  this.textValue = 'abc';
  this.enableValidation = true;
});
​
app.controller('Form2Controller', function() {
  this.textValue = 'abc';
  this.enableValidation = {
    minlength: true,
    maxlength: true,
    '*': false
  };
});
​
app.controller('Form3Controller', function() {
  this.numberValue = 133;
  this.enableValidation = {
    minlength: false,
    maxlength: true,
    pattern: (function() {
      return this.enableValidation.minlength && this.enableValidation.maxlength;
    }).bind(this)
  };
});
​
app.directive('status', function() { return {
  restrict: 'E',
  scope: {},
  bindToController: {
    value: '=',
    positive: '@',
    negative: '@'
  },
  controller: function() {
    
  },
  controllerAs: 'ctrl',
  template: (
    '<span class="text-success" ng-show="ctrl.value">' +
    '<span class="glyphicon glyphicon-ok"></span> {{ ctrl.positive }}' +
    '</span>' +
    '<span class="text-danger" ng-show="!ctrl.value">' +
    '<span class="glyphicon glyphicon-remove"></span> {{ ctrl.negative }}' +
    '</span>'
  )
};});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
dscheerenspro
0viewers