Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

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();
  });
})

kazu56
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away