<div class="container main-container" id="mainContainer">
      <h1>Калькулятор доставки</h1>
      <div class="content-container" id="contentContainer"></div>
    </div>

<script type="text/template" id="calculatorSubmitButtonTemplate">
  <div class="btn btn-default" id="calculatorSubmitButton">Рассчитать</div>
</script>


<script type="text/template" id="cityOfDepartureTemplate">
  <div class="panel panel-default">
    <div class="panel-body">
      <h2>Город отправления</h2>
      <div class="input-group">
        <input type="text" class="form-control" id="fldCityOfDeparture">
        <div id="errorMessageCityOfDeparture" class="help-block"></div>
      </div>
    </div>
  </div>
</script>

.not_valid{
    border: 1px solid red;
}

.valid{
    border: 1px solid #ccc;
}

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

APP.CityOfDepartureModel = Backbone.Model.extend({
  defaults: {
    cityName: undefined
  },

  validate: function(attrs) {
    var errorsArr = [];

    if($.trim(attrs.cityName).length == 0) {
        errorsArr.push('Это поле не может быть пустым')
    } else {
        if(isNaN(attrs.cityName) == false) { errorsArr.push('Это поле не может быть цифрой') };
    };

    if(errorsArr.length != 0) { return errorsArr };
  }
});



APP.CalculatorView = Backbone.View.extend({

  initialize: function() {
    this.cityOfDepartureModel = new APP.CityOfDepartureModel();
    this.cityOfDepartureWidjet = new APP.CityOfDepartureView({model: this.cityOfDepartureModel});
    this.render();
  },

  el: $('#contentContainer'),

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

  render: function () {
    this.$el.append(this.cityOfDepartureWidjet.render().el);
    this.$el.append(this.template());
    return this;
  },

  events:{
    'click #calculatorSubmitButton' : 'submit'
  },

  submit: function() {
    var cityName = $('#fldCityOfDeparture').val();

    this.cityOfDepartureModel.set({'cityName': cityName});

    if(this.cityOfDepartureModel.isValid()) {
      this.cityOfDepartureWidjet.validMarkAdd();
    } else {
      var errorMessagesArr = this.cityOfDepartureModel.validationError;
      this.cityOfDepartureWidjet.notValidMarkAdd(errorMessagesArr);
      this.cityOfDepartureModel.set({'cityName': undefined});
    };

    console.log('-----------------------');
    console.log('city dep: ', this.cityOfDepartureModel.get('cityName'));
  }

});



APP.CityOfDepartureView = Backbone.View.extend({

  initialize: function() {

  },

  tagName: 'div',

  className: 'city_of_departure_container',

  id: 'cityOfDepartureContainer',

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

  render: function () {
    this.$el.html(this.template());
    return this;
  },

  notValidMarkAdd: function(errorMessagesArr) {
    this.$el.find('#fldCityOfDeparture').removeClass('valid').addClass('not_valid');

    this.$el.find('#errorMessageCityOfDeparture').html('');
    for(key in errorMessagesArr) {
      this.$el.find('#errorMessageCityOfDeparture').append(errorMessagesArr[key] + '<br>');
    };
  },

  validMarkAdd: function() {
    this.$el.find('#fldCityOfDeparture').removeClass('not_valid').addClass('valid');
    this.$el.find('#errorMessageCityOfDeparture').html('');
  }

});




var app = new APP.CalculatorView();