javascript - Jquery event.preventDefault

Question

这个问题已经有答案了:

AJAX call works in Chrome and Safari but not in Firefox and IE? (2 个回答)

已关闭 9 年前。

我组合了一些 Jquery 来验证我网站上的表单。本质上，我正在使用 event.preventDefault();在无效输入的情况下禁止表单提交。

此代码在 Google Chrome 中完美运行，但在 Firefox 中根本不起作用(即使存在错误，该表单也会发送到我的服务器)。我是否做错了什么，或者是否有更合适的方法来完成此任务？

谢谢!

$(document).ready(function() {
//validate application form
$('#applyForm').submit(function() {
    var name = $('#name').val();
    var email = $('#email').val();
    var appForm = $("#appForm").val();

        // validate appForm
        var extension = appForm.replace(/^.*\./, '');

        if (extension == appForm) {
            extension = '';
        } else {
            extension = extension.toLowerCase();
        }

        switch (extension) {
            case 'doc':
            case 'docx':
            case 'txt':
            case 'pdf':

            break;

            default:
                // Cancel the form submission
                $('#appFormLabel').css('color', '#B32017');
                event.preventDefault();
        }


        if(name.length <= 1 && email.length >= 6) {
            // name field is invalid (highlight name box & block submission)
            $('#name').css('border', '2px solid #B32017');
            $('#nameLabel').css('color', '#B32017');
            event.preventDefault();
        } else if (email.length <= 5 && name.length >= 2) {
            // email field is invalid (highlight email box & block submission)
            $('#email').css('border', '2px solid #B32017');
            $('#emailLabel').css('color', '#B32017');
            event.preventDefault();
        } else if (email.length <= 5 && name.length <= 1) {
            // both invalid, highlight and block
            $('#name, #email').css('border', '2px solid #B32017');
            $('#nameLabel, #emailLabel').css('color', '#B32017');
            event.preventDefault();
        }
});

$(document).keyup(function(e) {
    if(e.keyCode == 13 && $('#name').val() != '' && $('#email').val()) {
        $('#submitApply').trigger('click');
    }
});
});

Answer 1

也许是因为您没有在任何地方显式声明事件。尝试接收这样的函数:

$('#applyForm').submit(function(event) {

  // ... more stuff
  // event.preventDefault();

});

它可能在 Chrome 中有效，因为它可能会为您捕获此类错误，而 Firefox 则没有那么宽容(在我看来这是一件好事)。