引越し関連で色々動いてたら更新の間が空いてしまったけど、いつもの事なので気にせず本題へ。

まず普通にformがあって、その情報で登録なり更新なりしたい状況にあるとします。ただし、エラーがあった場合はページの更新をせずに、エラーの理由を画面に表示させたいという要望があります。エラーが無ければ普通に遷移して問題ありません。

ここで実装したいこととしては

1. 問題が無いかどうかvalidationを走らせる
2. 問題があればエラーの表示、問題が無ければ更新

という流れの処理です。

まず1番ですが、これは普通にAjaxで送れば実現可能です。dataにどうやってformの値を突っ込めば良いんだろうって悩みましたが、検索してみたところ以下のような感じで実装可能でした。

$(function() {
  $('form').submit(function(event) {
    event.preventDefault();
    $.ajax({
      type: 'POST',
      url: 'hogehoge/validate',
      data: $(event.target).serialize()
    });
  });
})

適当に思い出しながら書いてるんで間違ってたらごめんなさい。$(event.target).serialize()でいい感じにデータまとめて渡せるっての初めて知りました、各所で使えそうですね。上記の返り値でerrorが返ってきたら適当にエラーを表示させて、successが来たら改めて登録を叩けば良いわけです。

が、今度はどうやって再びformのデータを送ればいいのかちょっと悩みました。またAjaxでデータを送る手もありますが、手動でリロードするのはなんか格好悪いなと。それなら普通にformをsubmitさせることは出来ないのかな、と。

一度preventDefaultしちゃったらこいつを復活させることは出来ないみたいでしたが、ちょっと探してみたら違う方法がありました。

$(function() {
  $('form').submit(function(event) {
    var formElement = $(this);
    // 中略
    formElement.submit();
  });
})

どうもformを取っておいて、submitを叩けば良いみたいです。これで普通にformのsubmitを実行したのと同じ結果を得ることが出来ました。めでたしめでたし。

…で、これ書いてて気付いてしまったのですが、そもそもの問題を解決しようと思ったら、別に1でvalidateだけじゃなくて実際更新させちゃえば、戻り値によってページのリロードするだけで済んじゃいますね。俺のバカ！y=ｰ( ﾟдﾟ)･∵. ﾀｰﾝ