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

まず普通に 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=ｰ( ﾟдﾟ)･∵. ﾀｰﾝ