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>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"
    rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-messages.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <meta charset="utf-8">
    <title>Validation Form Check Sample</title>
</head>
​
<body ng-app="vfc" ng-controller="MainCtrl">
    <div ng-messages="myForm.password.$error" ng-if="myForm.password.$dirty"> 
        <p ng-message="minlength" class="text-danger">"パスワードは８文字以上１６字以下としてください。"</p>
        <p ng-message="maxlength" class="text-danger">"パスワードは８文字以上１６字以下としてください。"</p>
    </div>
    <div ng-messages="myForm.passwordConfirm.$error" ng-if="myForm.password.$dirty"> 
        <p ng-message="confirm" class="text-danger">"パスワードが一致しておりません。"</p>
    </div>
    
    <form name="myForm">
        <div class="form-group">
            <label for="exampleInputPassword">パスワード:8字以上16字以下</label>
            <input 
                name="password"
                ng-model="password" 
                type="password" 
                class="form-control" 
                id="exampleInputPassword" 
                placeholder="パスワード"
                ng-maxlength="16"
                ng-minlength="8" />
        </div>
        <div class="form-group">
            <label for="exampleInputPasswordConfirm">パスワード確認</label>
            <input 
                name="passwordConfirm"
                ng-model="passwordConfirm" 
                type="password" 
                class="form-control" 
                id="exampleInputPasswordConfirm" 
                app-validators="validators.checkPasswordConfirm"
                placeholder="パスワード確認" />
        </div>
    </form>
    <pre>$scope.password: {{password}}</pre>
    <pre>$scope.myForm.password.$viewValue: {{myForm.password.$viewValue}}</pre>
    <pre>$scope.passwordConfirm: {{passwordConfirm}}</pre>
    <pre ng-class="{'text-danger':password !== passwordConfirm}">$scope.password === $scope.passwordConfirm: {{password === passwordConfirm}}</pre>
    <pre ng-class="{'text-danger':myForm.password.$viewValue !== passwordConfirm}">$scope.myForm.password.$viewValue === passwordConfirm: {{myForm.password.$viewValue === passwordConfirm}}</pre>
</body>
​
</html>
 
(function(){
            'use strict';
            var app = angular.module('vfc',['ngMessages']);
            app.controller('MainCtrl',function($scope){
                var checkPassword = function(modelValue,viewValue){
                    var confirmedPasswordVal = modelValue || viewValue;
                    var passwordVal = $scope.password || $scope.myForm.password.$viewValue;            
                    return angular.equals(confirmedPasswordVal,passwordVal);
                };
                $scope.$watch('myform.password.$viewValue',function(newValue,oldValue){
                    if(angular.isObject($scope.myform)){
                        $scope.myform.passwordConfirm.$validate();
                    }
                });
                $scope.validators = {
                    'checkPasswordConfirm':{
                        'confirm' : checkPassword
                    }
                };
            });
            app.directive('appValidators', function () {
                return {
                    require: 'ngModel',
                    scope: {
                        appValidators: '=',
                    },
                    link: function (scope, elem, attrs, ctrl) {
                        var validators = scope.appValidators || {};
                        angular.forEach(validators, function (val, key) {
                            ctrl.$validators[key] = val;
                        });
                    }
                };
            });
        }());
Output

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

Dismiss x
public
Bin info
CM-Kajiwarapro
0viewers