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="http://code.jquery.com/jquery-latest.js"></script>
    <script src="http://finom.github.io/js/matreshka.min.js"></script>
    <meta charset=utf-8 />
    <title>Matreshka Example App (Login form)</title>
</head>
​
<body>
    <div class="row-fluid">
        <form class="col-md-4 col-md-offset-4 login-form">
            <div class="form-group">
                <input type="text" class="user-name form-control" placeholder="Username">
            </div>
            <div class="form-group">
                <input type="password" class="password form-control" placeholder="Password">
                <label>
                    <input type="checkbox" class="show-password"> Show Password</label>
            </div>
            <input type="submit" value="Sign In" class="btn btn-primary submit">
            <label>
                <input type="checkbox" placeholder="Password" class="remember-me"> Remember me</label>
        </form>
    </div>
</body>
​
</html>
 
@import url("http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css")
 
var LoginForm = Class({
    'extends': MK,
    rememberMe: true,
    constructor: function() {
        this
            .initMK()
            .bindings()
            .events()
        ;
    },
    bindings: function() {
        return this
            .bindElement( this, '.login-form' )
            .bindElement({
                userName: this.$( '.user-name' ),
                password: this.$( '.password' ),
                showPassword: this.$( '.show-password' ),
                rememberMe: this.$( '.remember-me' )
            })
            .bindElement( 'isValid', this.$( '.submit' ), {
                setValue: function( v ) {
                    $( this ).toggleClass( 'disabled', !v );
                }
            })
        ;
    },
    events: function() {
        this.boundAll().on( 'submit', function( evt ) {
            this.login();
            evt.preventDefault();
        }.bind( this ) );
        
        return this
            .on( 'change:showPassword', function() {
                this.bound( 'password' ).type = this.showPassword ? 'text' : 'password';
            }, true )
            .on( 'change:userName change:password', function() {
                this.isValid = this.userName.length >= 4 && this.password.length >= 5;
            }, true )
        ;
    },
    login: function() {
        var data;
        
        if( this.isValid ) {
            data = {
                userName: this.userName,
                password: this.password,
                rememberMe: this.rememberMe
            };
            
            alert( JSON.stringify( data ) );
        }
        
        
        return this;
    }
});
​
var loginForm = new LoginForm();
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers