【jQuery】submit前に処理を行う方法

submit前にバリデーションチェックや、データの加工などを行う方法。

submitイベントを利用する方法

html

<form id="form_id" method="" action="">
  <button type="submit"></button>
</form>

jQuery

$('#form_id').submit(function(){

    //
    // バリデーションチェックや、データの加工を行う。
    //

    //バリデーションチェックの結果submitしない場合、return falseすることでsubmitを中止することができる。
    return false;
})

clickイベントを付与したボタンをトリガーにする方法

ボタンのクリックイベントで、jQueryを呼び出して、バリデーションチェックや、データの加工を行った後、submitを行う。
type="button"としないとsubmitがはしるので注意。

html

<form id="form_id" method="" action="">
  <!-- type="button"を省略すると、submitされる。 -->
  <button type="button" id="btn_id"></button>
</form>

jQuery

$(function(){
  $('#btn_id').click(function(){
    //
    // バリデーションチェックや、データの加工を行う。
    //

    $('#form_id').submit();
  });
})