 
       onFormSubmit: (e) ->
         e.preventDefault()
-        @refs['name'].getDOMNode().focus()
+        @addSong()
+
+      addSong: ->
+        form = @refs['form'].getDOMNode()
+        data = este.dom.serializeForm form
+        song = new app.songs.Song data.name, data.chordpro
+        errors = song.validate()
+        if errors.length
+          field = form.elements[errors[0].prop]
+          field.focus()
+          return
+        routes.home.redirect()
 
   @MSG_SONG_NAME: goog.getMsg 'Song name'
   @MSG_WRITE_LYRICS_HERE: goog.getMsg 'Write lyrics here'

goog.provide 'app.songs.edit.react.Page'

goog.require 'goog.ui.Textarea'

class app.songs.edit.react.Page

    @constructor
  ###
  constructor: (routes) ->

    @create = React.createClass

      render: ->
        {div,form,input,textarea,button,a} = React.DOM

        div className: 'new-song',
          form onSubmit: @onFormSubmit, ref: 'form',
            input
              autoFocus: true
              name: 'name'
