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

Question

我有一个带有一些表单字段的简单表单。其中有些是必需的，有些则不是。通过添加类“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

Answer 1

下面的代码应该做你想做的，只需给你的联系表单提交按钮 #contact-form-b​​utton 的 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
    }

});