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;。

jQuery：如果存在错误，请删除旧版本

1 个答案: