Backbone.js validating model attributes

Question

I've created a quite simple rails & backbone app. Up to now validation was executed on rails side. Now i thought about implementing backbone validation. I'm doing this so:

  createCampaign: (e) ->
    _this= @
    e.preventDefault()
    attributes =
      info: @getCountries()
      time_start: @$('#start').val()
      time_end: @$('#end').val()
    @collection.create attributes,
      wait: true
      success: ->
        @$('#errors').text('Campaign created!').addClass('correct')
        @$('#create').removeAttr('disabled');
        _this.clearFields('new_campaign')
      error: -> @handleError

With wait: true nothing happens. if i comment it out success actions are taken. although i don't provide needed data on intent.
My model & collection

class SvitlaTest.Models.Campaign extends Backbone.Model
  initialize: ->
    @bind("error", @errorHandling)

  validate: (attrs) ->
    return "Please fill start time of the campaign."  unless attrs.time_start
    return "Please fill end time of the campaign."  unless attrs.time_end
    "Please fill Countrz & language fields."  unless attrs.info
  errorHandling: (model, event) ->
    @$('#create').removeAttr('disabled');
    @$('#errors').html(error)

class SvitlaTest.Collections.Campaigns extends Backbone.Collection
  url: '/api/campaigns'

  model: SvitlaTest.Models.Campaign

Update 1
my template jst.eco

<form method="post" id="new_campaign" class="corners">
  <p>
    <label for="start" >Start time:</label>
    <input type="text" id="start" name="start" autofocus="" length='30' maxlength='30' />
  </p>
  <p>
    <label for="end" >End time:</label>
    <input type="text" id="end" name="end"  length='30' maxlength='30' />
  </p>
 <div id='country_list'>
 <h4>Info:</h4>
  <p class="country_element">
    Country
    <input type="text" class='country'  id="country" />
    Languages
    <input type="text" class="languages" id="languages" />
  </p>
  </div>
  <p>
    <input type="submit" id="create" value="Create" />
  </p>
</form>

as of your comment: I'm using gems/backbone-on-rails-1.0.0.0
no information entered
1) with active wait: true when i run
I'm using chrome. and if i click submit button (triggers createCampaign) leaving fields empty nothing happens! I'm looking at console & network tabs
2) wait: true commented out: callback for success is run, then nothing happens
information entered
With or without wait: true new model is created in DB

Update
added in initialize of view:

initialize: ->
    @collection.on('reset', @render,this)
    @collection.on('add', @appendCampaign ,this)
    @collection.on( "invalid", @handleInvalidState) 
  handleInvalidState: (model, error) ->
    console.log "validation"
    console.log model
    console.log error

if i comment out wait: true then i get this console output

validation 
Campaign {cid: "c2", attributes: Object, collection: Campaigns, _changing: false, _previousAttributes: Object…}
Please fill start time of the campaign.

if i don't comment it out nothing happens... have no idea why this happens

That's pretty weird, as the same thing is done in both case: github.com/documentcloud/backbone/blob/master/backbone.js#L872. Could you be more precise about what happens in both cases: Does the validation fails? Is the call to the server done? Does the server answer anything? Also, what version of Backbone do you use? — Loamhoof

shanewwarren shanewwarren · Accepted Answer · 2013-04-30T22:17:24

Before you implement validation on your Backbone models you need to understand how exactly the validate method you implement in your model is used. Backbone validation ensures that a model cannot be put in a bad state (contain bad data). This means if you try to set any data on a model that causes validation to fail, the data won't be sent. In this case an "invalid" event is triggered.

So as a starting point I'd first add a callback for the "invalid" event on the collection.

@collection.on "invalid", @handleInvalidState

handleInvalidState: (model, error) ->
    // do something with the error.

This will at least tell you if in fact validation is preventing the request from happening.

It appears based on the source code that if the model fails to validate within the create method of the collection it'll just return false. Which may be why you are seeing nothing happening.

Hope this helps!

Backbone.js validating model attributes

1 Answers