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://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">
    <form name="myForm">
        <div class="form-group">
            <label for="exampleInputPassword1">パスワード:8字以上16字以下</label>
            <input 
                name="password"
                ng-model="password" 
                type="text" 
                class="form-control" 
                id="exampleInputPassword1" 
                placeholder="パスワード"
                ng-maxlength="16"
                ng-minlength="8" />
        </div>
        <div class="form-group">
            <label for="exampleInputPasswordConfirm">パスワード確認</label>
            <input 
                name="passwordConfirm"
                ng-model="passwordConfirm" 
                type="text" 
                class="form-control" 
                id="exampleInputPasswordConfirm" 
                appValidators="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>
Output

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

Dismiss x
public
Bin info
CM-Kajiwarapro
0viewers