IT業界のすみっこ暮らし

ふと気がついたときの記録

ajax処理を含めたreturn falseでハマった件

やりたいこと

submitボタンを押下した後、ある条件の場合、ajax処理をした後(ここではバリデーション処理)、結果によってreturn false;でsubmit処理を中断させたかった。

NG

で、最初下のようなコードを書いたけど、どうしてもreturn false;が効かず、そのままsubmitされてしまう…。

$('button[type=submit]').click(function () {

    if ($('#value').length > 0) {
        
        $.ajax({
            url: '/CheckValue',
            type: 'POST',
            async: false,
            traditional: true,
            data: { value: $('#value').val() },
            success: function (data) {
                if (!data.IsSuccess) {
                    return false;
                }
            }
        });
           
    }
}

OK

ajax内では判定処理だけをし、return false;を外に出したら普通にいけた。

$('button[type=submit]').click(function () {
    var error = false;
    if ($('#value').length > 0) {
        
        $.ajax({
            url: '/CheckValue',
            type: 'POST',
            async: false,
            traditional: true,
            data: { value: $('#value').val() },
            success: function (data) {
                if (!data.IsSuccess) {
                    error = true;
                }
            }
        });
           
        if (error ) {
            return false;
        }
    }
}

なるほど、return false;をsubmit停止じゃなくて、ajaxの戻り値として扱ったみたいだ。(当然ちゃ当然か(汗))