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

jQuery Stop submitting form by checking error variable

本文关键字：提交 表单 变量 检查 错误      更新时间：2023-09-26

我有一个简单的表单与一些表单字段。有些是必需的，有些不是。通过添加'required'类，必填字段是必需的。

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

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

这是我的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

下面的代码应该做你想要的，只要给你的联系人表单提交按钮#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
    }
});

$('#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

我发现我的代码只是工作。我认为它不起作用的原因是因为我仍然使用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();
    }
});
相关文章：