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>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="bodyArea"></div>

<script type="text/template" id="diaryTpl">
  <input class="edit_field hide" type="text" value="">

  <div class="display_block">
    <a class="graph_title" href="#page_graph/1" id="graphTitle_1"><%= title %></a>
    <div class="action glyphicon glyphicon-remove pull-right"></div>
    <div class="action glyphicon glyphicon-edit pull-right"></div>  
  </div>
</script>


<script type="text/template" id="diariesTpl">
  <div id="diariesList" class="list-group diaries_list">
    <div id="diariesListInner" class="list-group diaries_list_inner"></div>

    <button type="button" class="btn btn-default btn-add pull-right" id="showAddDiaryModal" >
      <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
    </button>     

    <div id="addModalArea"></div>    
  </div>              
</script>


<script type="text/template" id="addDiaryModalTpl">
  <!-- Modal add diary -->
  <div class="modal fade diary_modal" id="addDiaryModal" tabindex="-1" role="dialog" aria-labelledby="diaryLabel">
    <div class="modal-dialog" role="document">     
      <div class="modal-content">
        <form class="" id="diaryForm" method="get" action="#" onSubmit="return false;">
          <fieldset>         
            <div class="modal-header">
              <btn type="btn" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></btn>
              <h4 class="modal-title" id="diaryLabel">Создание дневника</h4>
            </div>

            <div class="modal-body"...

CSS

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

JavaScript

window.APP = window.APP || {};

APP.DiariesCollection = Backbone.Collection.extend({

  model: APP.DiaryModel   

});




APP.DiaryModel = Backbone.Model.extend({

  defaults: {
    title: undefined,
    desc: undefined
  },

  validation: {  
    title: [ 
              { required: true, msg: 'Поле не может быть пустым' },
              { minLength: 3,   msg: 'Введите не менее 3 символов' }
            ],    

    desc: [ 
              { maxLength: 200,   msg: 'Введите не более 200 символов' }
            ]                                                                                             
  }       


});





APP.DiariesView = Backbone.View.extend({  

  initialize: function() {     
    this.collection = new APP.DiariesCollection();
    this.addDiaryModal = new APP.AddDiaryModalView();

    Backbone.Validation.bind(this);

    this.render();
  },

  template: _.template($('#diariesTpl').html()), 

  render: function () {  
    this.$el.html(this.template());
    this.$el.find('#addModalArea').html(this.addDiaryModal.render().el);

    this.renderDiaries();

    return this;
  },

  renderDiaries: function () {
    //this.collection.fetch();

    //console.log('renderDiaries', this.collection)

    this.$el.find('#diariesListInner').empty();

    this.collection.each(function(diaryModel) {
      var title = diaryModel.get('title'), 
          desc = diaryModel.get('desc'),
          diaryView = new APP.DiaryView(title, desc);

      this.$el.find('#diariesListInner').append(diaryView.el);
    }, this)
  },

  events:{
    'click #showAddDiaryModal' : 'showAddDiaryModal',
    'click #addDiaryBtn' : 'addDiary'
  }, 

  addDiary: function() { 
    var titleValue =  $.trim(this.$el.find('#diaryTitle').val()), 
        descValue =   $.trim(this.$el.find('#diaryDesc').val());

    //titleValue = undefined;
    //descValue = undefined;

var model = new APP.DiaryModel();
    
    this.model = model
    
    Backbone.Validation.bind( this, {
       ...