jQueryでの$().submit()の動作について

Question

フォームからの送信ボタン(type="submit")をクリックされたとき
jsファイルにて下記のような処理を行うようにプログラミングしています。

$(function() {
	var forms = '#testform';

	$('#submit_button').on('click', errorcheck);

	function errorcheck() {
		console.log('check1');

		//送信しない
		$(forms).submit(function() {
			console.log('cancel');
			return false;
		});

		/*
			空欄がないかを確認する処理
			空欄あり => errorflg = false;
			空欄なし => errorflg = true;
		*/

		if (errorflg) {
			valuecheck();
		} else {
			//終了
			return false;
		}
		
	};

	function valuecheck() {
		console.log('check2');

		/*
			正規表現などを用いて入力値を確認する処理
			不正あり => valueflg = false;
			不正なし => valueflg = true;
		*/

		if (valueflg) {
			ajaxstart();
		} else {
			//終了
			return false;
		}
	};

	function ajaxstart() {
		var formsinfo = $(forms).serialize();

		$.ajax({
			type: 'post',
			url: 'insert.php',
			data: formsinfo,
			datatype: 'json',
		}).done(function(returns) {
			//jsonで返ってきた値を処理
		}).fail(function(jqXHR, textStatus, errorThrown) {
			alert('エラーです\n');
		});
	};
});

これを実行した際、
コンソール（GoogleChromeで確認）には以下のように表示されていると私は考えていました。

check1
cancel
check2

しかし、実際は以下のように表示されます。

check1
check2
cancel

また、エラーを繰り返すテストを行うとコンソールのメッセージが下記のようになります。

check1
check2
cancel
cancel
cancel

送信ボタンを押したのが3回目だと「cancel」が3回連続で、
4回目だと「cancel」が4回連続で表示と増えていきます。

そこで質問なのですが、
A．私が考えていたような順番にならないのはなぜでしょうか。
何か優先順位があるのでしょうか。
B．送信ボタンを押した回数だけ「cancel」が増えるのはなぜでしょうか。

以上、ご教示いただけると幸いです。

なお、質問に関係ないと思われる部分のプログラムは省略しています。

Answer 1

ざっと書いておきました

• 空欄チェックをするものにはdata-requiredをつけてあります
• 正規表現チェックするものにはdata-patternを指定してあります

これは本来requiredとpatternでsubmitを抑制できるものの
エミュレートです。
つまり普通にrequiredとsubmitで処理すればいいような気がします。

• ajaxでpostするときはFormDataをつかうのがスマートです。
• 「datatype」は「dataType」なので注意

<script>
$(function() {
  var forms = '#testform';
  $(forms).on('submit',function(e){
    e.preventDefault();
    var flg1=!$(this).find("[data-required]").is(function(){
      return $(this).val()=="";
    });
    var flg2=!$(this).find("[data-pattern]").is(function(){
      console.log(new RegExp("^"+$(this).data("pattern")+"$"));
      return !$(this).val().match(new RegExp("^"+$(this).data("pattern")+"$"));
    });
    console.log([flg1,flg2]);
    if(flg1 && flg2){
      var fd=new FormData($(this).get(0));
      $.ajax({
      type: 'post',
      url: 'insert.php',
      data: fd,
      dataType: 'json',
      cache:false,
      processData: false,
      contentType: false,
      }).done(function(data) {
        console.log(data)
      }).fail(function(xhr,err) {
        alert(err);
      });
    }
  });
});
</script>
<form id="testform">
<input type="text" name="a" data-required="1" data-pattern=".{0,3}">(入力必須、3文字以内)<br>
<input type="text" name="b" data-required="1">(入力必須)<br>
<input type="text" name="c" data-pattern="[0-9]*">(入力任意、数字のみ)<br>
<input type="submit" value="go">
</form>

Comments

[退会済みユーザー]

ご回答ありがとうございます。

HTML側の<input>に記述することでこんなことができるとは初めて知りました。
ぜひ今後の参考にさせていただきます。

先輩に教えられた方法や、初めてやって成功した方法を繰り返したり、
その時必要なものにちょっと書き換えたりするような仕事のやり方じゃ全然ダメですね。
もっと学ぶことに貪欲になって成長していきます。

FormDataの方がスマートというのは調べて勉強したいと思います。

今回はありがとうございました。

「dataType」のご指摘ありがとうございます。

Answer 2

下記はsubmitイベントに関数を割り当てています。（submitしていません）

        $(forms).submit(function() {
            console.log('cancel');
            return false;
        });
```↓
```js
        // これと同じ
        $(forms).on('submit',function() {
            console.log('cancel');
            return false;
        });

ちなみに#submit_buttonをクリックするたび新しくイベントに関数を割り当てするので、submitイベントが起こると全ての関数がそれぞれ実行されます。丁寧にイベントを外す処理をする気が有れば別ですが、基本的にイベントの中でイベントを割り当てるのは意図せぬ挙動に悩むことになります。

【.submit() | jQuery API Documentation】
https://api.jquery.com/submit/

This method is a shortcut for .on( "submit", handler ) in the first variation, and .trigger( "submit" ) in the third.

Comments

[退会済みユーザー]

ご回答ありがとうございます。

「$(forms).on('submit',function() {」と同じという考えは全く出てきませんでした。
$().val()とかと同じだとずっと考えていました。
お恥ずかしい限りです。

もっとプログラミングに関しての調べ方を勉強します。