Backbone Validation example 1

Uses jQuery.serializeObject to serialize the form and set all data on submit

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>
<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">
              <option>Norway</option>
              <option>Sweeden</option>
              <option>Denmark</option>
              <option>Finland</option>
              <option>Iceland</option>
   ...

CSS

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

JavaScript

// Extend the callbacks to work with Bootstrap, as used in this example
// See: http://thedersen.com/projects/backbone-validation/#configuration/callbacks
var SomeModel = Backbone.Model.extend({
  validation: function() {
    return {
      name: {
        required: true
      }
    }
  }
});

console.log(SomeModel);


_.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: {
        terms: false,
        gender: ''
    },
    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
        }
    }
});

// Define a View that uses our model
var SignUpForm = Backbone.View.extend({
    events: {
        'click #signUpButton': function (e) {
            e.preventDefault();
            this.signUp();
        }
    },

    initialize: function () {
        // This hooks up the validation
        // See:...