Backbone Validation example 2

Uses StickIt to perform binding between the model and the view

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.validation/0.7.1/backbone-validation-min.js"></script>
<script src="//cdn.jsdelivr.net/backbone.stickit/0.6.3/backbone.stickit.min.js"></script>
<form class="form-horizontal" role="form">
     <h3>Sign Up!</h3>

    <div class="form-group">
        <label for="username" class="col-lg-2 control-label">Username</label>
        <div class="col-lg-10">
            <input type="text" class="form-control" id="username" name="username" />
            <span class="help-block hidden"></span>
        </div>
    </div>
    <div class="form-group">
        <label for="email" class="col-lg-2 control-label">Email</label>
        <div class="col-lg-10">
            <input type="email" class="form-control" id="email" name="email" />
            <span class="help-block hidden"></span>
        </div>
    </div>
    <div class="form-group">
        <label for="password" class="col-lg-2 control-label">Password</label>
        <div class="col-lg-10">
            <input type="password" class="form-control" id="password" name="password" />
            <span class="help-block hidden"></span>
        </div>
    </div>
    <div class="form-group">
        <label for="repeatPassword" class="col-lg-2 control-label">Repeat Password</label>
        <div class="col-lg-10">
            <input type="password" class="form-control" id="repeatPassword" name="repeatPassword" />
            <span class="help-block hidden"></span>
        </div>
    </div>
    <div class="form-group">
        <label for="country" class="col-lg-2 control-label">Country</label>
        <div class="col-lg-10">
            <select class="form-control" id="country" name="country">
            </select>
            <span class="help-block hidden"></span>
        </div>
    </div>
   ...

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
form {
    padding: 0 20px;
}

JavaScript

// Since we are automatically updating the model, we want the model
// to also hold invalid values, otherwise, we might be validating
// something else than the user has entered in the form.
// See: http://thedersen.com/projects/backbone-validation/#configuration/force-update
Backbone.Validation.configure({
    forceUpdate: true
});

// Extend the callbacks to work with Bootstrap, as used in this example
// See: http://thedersen.com/projects/backbone-validation/#configuration/callbacks
_.extend(Backbone.Validation.callbacks, {
    valid: function (view, attr, selector) {
        var $el = view.$('[name=' + attr + ']'), 
            $group = $el.closest('.form-group');
        
        $group.removeClass('has-error');
        $group.find('.help-block').html('').addClass('hidden');
    },
    invalid: function (view, attr, error, selector) {
        var $el = view.$('[name=' + attr + ']'), 
            $group = $el.closest('.form-group');
        
        $group.addClass('has-error');
        $group.find('.help-block').html(error).removeClass('hidden');
    }
});

// Define a model with some validation rules
var SignUpModel = Backbone.Model.extend({
    defaults: {
        country: 'Norway'
    },
    validation: {
        username: {
            required: true
        },
        email: {
            required: true,
            pattern: 'email'
        },
        password: {
            minLength: 8
        },
        repeatPassword: {
            equalTo: 'password',
            msg: 'The passwords does not match'
        },
        country: {
          oneOf: ['Norway', 'Sweeden']
        },
        gender: {
            required: true
        },
        age: {
            required: false,
            range: [18, 100]
        },
        terms: {
            acceptance: true
        },
        termscheck:{
          required: false,
          msg:"invalid term and condition"
        }
        
    }
});

var SignUpForm = Backbone.View.extend({
    events: {
      ...