javascript - jQuery:如果存在错误，请删除旧的

Question

我对我的联系表单使用一个小的 Ajax 请求来显示我的验证。

$('#contact-form').on('submit', function (event) {
    event.preventDefault();

    $.ajax({
        url: 'send-mail',
        type: 'POST',
        data: $('#contact-form').serialize(),
        success: function (data) {
            // Success...

            $("#validation-output-success").text("Success!");
        },
        error: function (data) {
            // Error...

            var errors = $.parseJSON(data.responseText);

            $.each(errors, function( k, v ) {
                $("#validation-output-error").text( v ).append('<br />');
            });

        }
    });
});

它工作正常，当有空的东西时它会返回它并说明什么输入是空的。同理，如果有效，则输出成功!

但现在问题来了，当有一个字段为空时他会输出它，但是当你再次按下提交按钮时他会给出相同的错误但不会删除旧错误。所以你会得到双重相同的错误信息。

然后如果你完成它，他会返回成功。但他仍然会显示旧的错误信息。

我的问题是，当您再次提交表单时，我如何使用 .fadeOut()、.remove() 或其他 jquery 函数来删除旧错误。

Answer 1

您可以在提交时清空错误文本和 fadeOut()。然后将 fadeIn() 添加到成功/错误消息中。像这样的东西:

$('#contact-form').on('submit', function (event) {
    event.preventDefault();
     $("#validation-output-error").text("").fadeOut();

    $.ajax({
        url: 'send-mail',
        type: 'POST',
        data: $('#contact-form').serialize(),
        success: function (data) {
            // Success...

            $("#validation-output-success").text("Success!").fadeIn();
        },
        error: function (data) {
            // Error...

            var errors = $.parseJSON(data.responseText);

            $.each(errors, function( k, v ) {
                $("#validation-output-error").text( v ).append('<br />').fadeIn();
            });

        }
    });
});

此外，如果您还没有这样做，您可能希望在 css 中提供错误/成功消息 display: none;。