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>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script
src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.min.js">
</script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-app="app">
  <br><br><br>
  <form name="form" ng-controller="Main">
    
    <div class="form-group" ng-class="{ 'has-error': form.name.$dirty && form.name.$invalid }">
      <label for="name" class="col-sm-4 control-label">What's your name?</label>
      <div class="col-sm-6">
        <input class="form-control has-feedback" id="name" name="name" 
          required
          ng-minlength="4"
          ng-model="formData.name"
          tooltip="{{form.name.$valid ? '' : 'Minimum 4 letters please. &ZeroWidthSpace;  Please fill in'}}"  
          tooltip-trigger="focus" 
          tooltip-placement="bottom">
          <span style="padding-right:10px;" class="glyphicon glyphicon-ok-sign text-success form-control-feedback" aria-hidden="true"
          ng-show="form.name.$valid"></span>
        <small>Your name helps us  identfy you</small>
      </div>
      <pre>form.name.$error  = {{ form.name.$error | json }}</pre>
      <div ng-messages="name.$error" style="color:maroon" role="alert">
    <div ng-message="required">You did not enter a field</div>
    <div ng-message="minlength">Your field is too short</div>
    <div ng-message="maxlength">Your field is too long</div>
  </div>
    </div>
​
  </form>
  
</body>
</html>
 
let app = angular.module('app', ['ui.bootstrap']);
​
app.controller('Main', function($scope){
  $scope.formData = {
    name : "test"
  }
})
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers