Question

我有一个带有一些表单字段的简单表单。其中一些是必需的，有些则不是。添加要求的类＆＃39;

需要必填字段

当我提交时，我检查#contact-form字段并在此基础上给出空字段错误类并提交表单是或否。

将错误类添加到字段不是问题，但检查＆＃34;错误＆＃34;变量是。因为我不知道在哪里可以检查错误变量。

这是我的jQuery代码：

$('#contact-form').submit(function (event) {
    var errors = false;
    $(this).find('.required').each(function () {
        if ($(this).val().length < 1) {
            $(this).addClass('error');
            errors = true;
        }
    });
    if (errors == true) {
        event.preventDefault();
    }
});

JsFiddle

Answer 1

以下代码应该执行您想要的操作，只需将您的联系表单提交按钮设为#contact-form-button的ID。

$('#contact-form-button').click(function(e) {  // using click function
                                               // on contact form submit button
    e.preventDefault();  // stop form from submitting right away

    var error = false;

    $(this).find('.required').each(function () {
        if ($(this).val().length < 1) {
            $(this).addClass('error');
            error = true;
        }
    });

    if (!error) {                     // if not any errors
        $('#contact-form').submit();  // you submit form
    }

});

Answer 2

$('#contact-form').submit(function (event) {
    var errors = false;
    $(this).find('.required').each(function () {
        if ($(this).val().length < 1) {
            $(this).addClass('error');
            errors = true;
        }
    });
    if (errors == true) {
        event.preventDefault();
        return false;
    }
    return true;
})

如果验证成功交叉，则返回true以提交表单

Answer 3

我发现我的代码正常运行。我认为它不起作用的原因是因为我仍然使用PHP处理我的真实网站，我需要1个字段，而不是我的jQuery。这造成了混乱。

以下代码有效：

$('#contact-form').submit(function (event) {
    var errors = false;
    $(this).find('.required').each(function () {
        if ($(this).val().length < 1) {
            $(this).addClass('error');
            errors = true;
        }
    });
    if (errors == true) {
        event.preventDefault();
    }
});

jQuery通过检查错误变量停止提交表单

3 个答案: