javascript - 错误提交表单时 AJAX 失败状态不起作用

问题描述

HTML我在静态页面中有一个表单，使用该https://formcarry.com/网站来处理它并在不使用 PHP 的情况下发送。我AJAX用 aspinner和 a构建它，toggleclass并appendtext在提交时显示反馈successful。我有一个alert()提交失败的问题，问题是警报不起作用，从不显示。你可以在这里看到一个活生生的例子。

在以下情况下，表单可能会失败：

用户没有写邮件。
用户没有写输入的短信或姓名。用户没有写输入的短信或姓名。
用户发送了一些提交，而它们之间的等待时间不超过 15 秒。

如果发生这种情况（表单失败），它只显示一个无限微调器，不显示警报。

HTML：

<form class="ajaxForm" action="https://formcarry.com/s/YN2IlAj4rfL" method="POST" accept-charset="UTF-8">
    <div class="form-group">
        <input type="email" class="form-control" id="email" aria-describedby="emailHelp" name="Correo" placeholder="Correo electrónico">
        <!-- use this to reply visitors and prevent spam via akismet -->
    </div>
    <div class="form-group">
        <input type="text" class="form-control" id="nombre" name="Nombre" placeholder="Nombre">
    </div>
    <div class="form-group">
        <textarea rows="4" class="form-control" id="textarea" name="Mensaje" placeholder="Cuéntanos"></textarea>
    </div>
    <input type="hidden" name="_gotcha">
    <!-- use this to prevent spam -->
    <div class="form-group">
        <input type="submit" class="btn-contacto float-right">
        <div class="spinner-border" role="status">
            <span class="sr-only">Cargando...</span>
        </div>
    </div>
</form>

CSS

.ajaxForm {
/* height: 297px; */
    width: 460px;
}
.form-control,
.form-control:active,
.form-control:hover,
.form-control:focus {
    border: 0px;
    margin-bottom: 6%;
    font-size: 1.05rem;
    border-radius: 0px;
    background: #c33e69;
    color: #fff;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    /* WebKit, Blink, Edge */
    color: rgba(255, 255, 255, 0.55) !important;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: rgba(255, 255, 255, 0.55) !important;
    opacity: 1;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: rgba(255, 255, 255, 0.55) !important;
    opacity: 1;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: rgba(255, 255, 255, 0.55) !important;
}
input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
    /* Microsoft Edge */
    color: rgba(255, 255, 255, 0.55) !important;
}
input::placeholder,
textarea::placeholder {
    /* Most modern browsers support this now. */
    color: rgba(255, 255, 255, 0.55) !important;
}
input.footer-input.footer-input::-webkit-input-placeholder,
textarea.footer-input::-webkit-input-placeholder {
    /* WebKit, Blink, Edge */
    color: rgb(195, 62, 105, 0.40) !important;
}
input.footer-input:-moz-placeholder,
textarea.footer-input:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: rgb(195, 62, 105, 0.40) !important;
    opacity: 1;
}
input.footer-input::-moz-placeholder,
textarea.footer-input::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: rgb(195, 62, 105, 0.40) !important;
    opacity: 1;
}
input.footer-input:-ms-input-placeholder,
textarea.footer-input:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: rgb(195, 62, 105, 0.40) !important;
}
input.footer-input::-ms-input-placeholder,
textarea.footer-input::-ms-input-placeholder {
    /* Microsoft Edge */
    color: rgb(195, 62, 105, 0.40) !important;
}
input.footer-input::placeholder,
textarea.footer-input::placeholder {
    /* Most modern browsers support this now. */
    color: rgb(195, 62, 105, 0.40) !important;
}
.btn-contacto {
    width: 100px;
    cursor: pointer;
    border: 2px #c33e69 solid;
    border-radius: 0px;
    color: #c33e69;
    background: #fff;
    height: 45px;
    padding: 0;
}
.spinner-border {
    display: none;
    float: right;
    margin-top: 1.5%;
    margin-right: 2.5%;
    color: #fbc00c;
}
/* Change the white to any color ;) */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-text-fill-color: #fff !important;
    -webkit-box-shadow: 0 0 0 30px #c33e69 inset !important;
}
/* Change the white to any color ;) */

input.footer-input:-webkit-autofill,
input.footer-input:-webkit-autofill:hover,
input.footer-input:-webkit-autofill:focus,
input.footer-input:-webkit-autofill:active {
    -webkit-text-fill-color: #c33e69 !important;
    -webkit-box-shadow: 0 0 0 30px #fff inset !important;
}
.ajaxForm {
    -webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -ms-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
    opacity: 1;
}
.has-success {
    opacity: 0;
}

$(function() {
    $(".ajaxForm").submit(function(e) {
        $('.spinner-border').css("display", "block");
        e.preventDefault();
        var href = $(this).attr("action");
        $.ajax({
            type: "POST",
            dataType: "json",
            url: href,
            data: $(this).serialize(),
            success: function(response) {
                if (response.status == "success") {
                    $(".ajaxForm").toggleClass("has-success");
                    setTimeout(function() {
                        $(".ajaxForm").html(response);
                        $(".ajaxForm").toggleClass("has-success").append("<div class='swal2-icon swal2-success swal2-animate-success-icon' style='display: flex;'><div class='swal2-success-circular-line-left' style='background-color: rgb(255, 255, 255);'></div><span class='swal2-success-line-tip'></span><span class='swal2-success-line-long'></span><div class='swal2-success-ring'></div> <div class='swal2-success-fix' style='background-color: rgb(255, 255, 255);'></div><div class='swal2-success-circular-line-right' style='background-color: rgb(255, 255, 255);'></div></div><p class='text-center'>¡Gracias! Contactaremos contigo lo antes posible.</p>");
                    }, 500);
                } else {
                    alert("An error occured.");
                }
            }
        });
    });
});

标签： javascriptjquerycssajax

javascript - 错误提交表单时 AJAX 失败状态不起作用

问题描述

解决方案

推荐阅读