Jquery event.preventDefault

时间:2014-01-27 02:26:30

标签: javascript jquery google-chrome firefox

我整理了一些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');
    }
});
});

2 个答案:

答案 0 :(得分:1)

您需要在event函数中传递submit

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

答案 1 :(得分:1)

也许是因为你没有在任何地方明确声明event。尝试接收这样的功能:

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

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

});

它可能适用于Chrome,因为它可能会为您捕获此类错误,而Firefox并不是那么宽松(在我看来这是一件好事)。