即使表单包含在 if 语句中并且不满足条件，仍会提交表单吗？

Question

我已经将整个验证代码绑定到 $('#post-button').click。这个想法是，变量e_exit设置为true，然后表单中的数据经过一系列检查。如果它满足任何 if 语句的条件，则会显示一条包含该问题的消息，并且 e_exit 设置为 false。但问题是，它没有正确完成，因为表单仍在提交（就像显示消息后四分之一秒）。

我在这里处理布尔值，所以类型转换肯定不是问题，我真的不明白发生了什么：

$('#post-button').click( function() {
    var e_exit = true;
    var notif_message = '<div class="notification red"><div class="cross"></div>';

    var name = $('input[name=name]').val();
    var url = $('input[name=url]').val();
    var urlrgx = /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&amp;:/~\+#]*[\w\-\@?^=%&amp;/~\+#])?/i;
    var urltst = urlrgx.test(url);

    if(name == '' || name == 'Enter a name for this offer') {
        $('#notification').html(notif_message + "You need to enter a name for this offer name. Try to pick something that you'll easily remember when seen again.</div>");
            e_exit = false;
    }

    if(!urltst) {
        $('#notification').html(notif_message + "You need to enter a valid offer url prefixed with http:// for this offer.</div>");
            e_exit = false;
    }

    var rotation_select_val = parseInt($('select[name=r_id]').val());
    if(rotation_select_val != 0) {
        var min_val = isNaN($('input[name=r_min]').val());
        var max_val = isNaN($('input[name=r_max]').val());

        if(min_val || max_val) {
            $('#notification').html(notif_message + "You need to enter a numeric value for your rotation's min and max hits for this offer.</div>");
            e_exit = false;
        }
    }

    var geo_select_val = $('select[name=g_country\\[1\\]]').val();          
    if(geo_select_val != 0) {
        var geo_url_val = $('input[name=g_url\\[1\\]]').val();
        var geo_urltst = urlrgx.test(geo_url_val);

        if(!geo_urltst) {
            $('#notification').html(notif_message + "You need to enter a valid url prefixed with http:// for your geo-location targets.</div>");
            e_exit = false;
        }
    }

    if(e_exit) {
         $('form').submit();   
    }
});

任何关于为什么会发生这种情况的答案，或者带有解释的编辑都会有很大的帮助！

Answer 1

如果#post-button是提交按钮，则需要返回false来停止表单提交。

更好的解决方案是绑定到表单的 submit 事件：

$("#your-form").submit(function() {
    // validate...

    return e_exit;
});

只有当您从事件处理程序返回 true 时，才允许表单提交。

编辑：

也许ajax插件也订阅了post按钮的click事件？在这种情况下，我会返回 false 并确保停止事件进一步传播，如下所示：

$("#post-button").click(function(ev) {
    // validation
    ev.stopPropagation();
    return false;
});