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插件也订阅了帖子按钮的click事件？在这种情况下，我会返回false并确保阻止事件进一步传播：

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

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

1 个答案: