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 ng-app="myApp">
<head>
  <link rel="stylesheet" href="http://cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
</head>
<body>
  
<form name="signup_form" novalidate ng-submit="signupForm()" ng-controller="signupController">
  <fieldset>
    <legend>Signup</legend>
​
    <div class="row">
      <div class="large-12 columns">
        <label>Your name</label>
        <input type="text"
               placeholder="Name"
               name="name"
               ng-model="signup.name"
               ng-minlength=3
               ng-maxlength=20 required />
        <div class="error"
            ng-show="signup_form.name.$dirty && signup_form.name.$invalid && signup_form.submitted">
        <small class="error"
            ng-show="signup_form.name.$error.required">
               Your name is required.
        </small>
        <small class="error"
               ng-show="signup_form.name.$error.minlength">
               Your name is required to be at least 3 characters
        </small>
        <small class="error"
               ng-show="signup_form.name.$error.maxlength">
               Your name cannot be longer than 20 characters
        </small>
      </div>
      </div>
    </div>
​
    <div class="row">
      <div class="large-12 columns">
        <label>Your email</label>
        <input type="email"
          placeholder="Email"
          name="email"
          ng-model="signup.email"
          ng-minlength=3 ng-maxlength=20 required />
        <div class="error"
             ng-show="signup_form.name.$dirty && signup_form.name.$invalid && signup_form.submitted">
          <small class="error"
                 ng-show="signup_form.email.$error.required">
                 Your email is required.
          </small>
          <small class="error"
                 ng-show="signup_form.email.$error.minlength">
                 Your email is required to be at least 3 characters
          </small>
          <small class="error"
                 ng-show="signup_form.email.$error.email">
                 That is not a valid email. Please input a valid email.
          </small>
          <small class="error"
                 ng-show="signup_form.email.$error.maxlength">
                 Your email cannot be longer than 20 characters
          </small>
        </div>
      </div>
    </div>
​
    <div class="large-12 columns">
      <label>Username</label>
        <input  type="text"
                placeholder="Desired username"
                name="username"
                ng-model="signup.username"
                ng-minlength=3
                ng-maxlength=20
                ensure-unique="username" required />
      <div class="error"
           ng-show="signup_form.name.$dirty && signup_form.name.$invalid && signup_form.submitted">
        <small class="error"
               ng-show="signup_form.username.$error.required">
               Please input a username
        </small>
        <small class="error"
               ng-show="signup_form.username.$error.minlength">
               Your username is required to be at least 3 characters
        </small>
        <small class="error"
               ng-show="signup_form.username.$error.maxlength">
               Your username cannot be longer than 20 characters
        </small>
        <small class="error"
               ng-show="signup_form.username.$error.unique">
               That username is taken, please try another
        </small>
      </div>
    </div>
​
    <button type="submit" class="button radius">Submit</button>
  </fieldset>
</form>
​
</body>
</html>
 
angular.module('myApp', [])
.directive('ensureUnique', ['$http', function($http) {
  return {
    require: 'ngModel',
    link: function(scope, ele, attrs, c) {
      scope.$watch(attrs.ngModel, function() {
        $http({
          method: 'POST',
          url: '/api/check/' + attrs.ensureUnique,
          data: {'field': attrs.ensureUnique}
        }).success(function(data, status, headers, cfg) {
          c.$setValidity('unique', data.isUnique);
        }).error(function(data, status, headers, cfg) {
          c.$setValidity('unique', false);
        });
      });
    }
  };
}])
​
.controller('signupController', ['$scope', function($scope) {
  $scope.submitted = false;
  $scope.signupForm = function() {
    if ($scope.signup_form.$valid) {
      // Submit as normal
    } else {
      $scope.signup_form.submitted = true;
    }
  }
}]);
Output

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

Dismiss x
public
Bin info
auserpro
0viewers