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

【问题标题】：jQuery Stop submitting form by checking error variablejQuery通过检查错误变量停止提交表单
【发布时间】：2014-08-20 22:21:47
【问题描述】：

我有一个带有一些表单域的简单表单。其中有些是必需的，有些则不是。必填字段是通过添加类 'required' 来要求的。

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

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

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

【问题讨论】：

你能创造一个小提琴吗？代码对我来说似乎没问题。
请创建 jsfiddle
@PratikJoshi 这是 jsFiddle jsfiddle.net/6Hpe9/1
检查“error”变量是什么意思？
代码对我来说似乎很完美。

标签： javascript jquery forms events

【解决方案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
    }

});

【讨论】：

【解决方案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 以提交表单

【讨论】：

【解决方案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();
    }
});

【讨论】：