Railsのform入力画面で、submit前に移動しようとした時に警告を出す

試行錯誤に時間がかかったので、備忘録を兼ねて共有します。

#方法

• 警告を出したいformの変更を認識する
• 編集中の場合、aタグがクリックされた時に警告を出す
• 編集中の場合、ブラウザのタブが閉じられようとしたときに警告を出す

app/views/someform.html.erb

<%= form_tag some_path, class: 'warning-before-move' do %>
  ....
<% end %>

app/assets/javascripts/form_warning_before_move.js

var unsaved
var formWarningMessage = "登録・保存していない入力内容は破棄されますがよろしいですか？"

$(document).on('ready page:change', function(){
  unsaved = false

  //変更の認識
  if( $('form.warning-before-move').length > 0 ){
    $('input, textarea, select').on('change', function(){
      console.log('changed')
      unsaved = true
    })
  }

  //aタグクリック時の警告
  $('a').click(function(e){
    var href = $(this).attr('href')
    if(typeof(href) !== "undefined" && href != '#' && unsaved){
      if(confirm(formWarningMessage) == false){
        e.preventDefault()
      }
    }
  })
})

//ブラウザのタブを閉じようとした時、またはturbolinks以外のリンクをクリックした時の警告
$(window).on('beforeunload', function(){
  if(unsaved){
    return formWarningMessage
  }
})

#課題
data-no-turbolinks="true"を設定しているaタグをクリックした場合、警告が2回出ます。
解決方法が分かる方が居れば、教えてもらえると嬉しいです。

以上です。

#参考
http://www.railsmine.net/2013/11/javascript-alert-for-unsaved-changes-turbolinks-jquery.html
https://github.com/rails/turbolinks
http://stackoverflow.com/questions/11844256/alert-for-unsaved-changes-in-form
http://stackoverflow.com/questions/3252730/how-to-prevent-a-click-on-a-link-from-jumping-to-top-of-page-in-jquery