Skip to content

Instantly share code, notes, and snippets.

/index.html

Created October 27, 2016 10:00
Show Gist options
  • Save anonymous/9b80c9463925cdd42b7cda2534e8ef37 to your computer and use it in GitHub Desktop.
Save anonymous/9b80c9463925cdd42b7cda2534e8ef37 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/tukulamavi
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script
src="http://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>
<script id="jsbin-javascript">
'use strict';
var app = angular.module('app', ['ui.bootstrap']);
app.controller('Main', function ($scope) {
$scope.formData = {
name: "test"
};
});
</script>
<script id="jsbin-source-html" type="text/html"><!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></script>
<script id="jsbin-source-javascript" type="text/javascript">let app = angular.module('app', ['ui.bootstrap']);
app.controller('Main', function($scope){
$scope.formData = {
name : "test"
}
})</script></body>
</html>
Raw
jsbin.tukulamavi.js
'use strict';
var app = angular.module('app', ['ui.bootstrap']);
app.controller('Main', function ($scope) {
$scope.formData = {
name: "test"
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment