当我似乎无法重现它时,如何调试此验证错误?

时间:2015-04-04 03:18:32

标签: javascript jquery html forms validation

我在我的网站上建立了一个注册表单(似乎)随机错误地为我的用户提供了大约3%(只是估计)。该错误不允许用户注册我的服务,他们经常需要致电办公室,以便我们可以手动将其添加为新客户。这花费了我们相当多的时间在电话上,并且可能使那些决定不打电话的用户花费我们的业务,而是去竞争对手。

我已经尝试过多次这样的调试,甚至在过去的一年里也因为挫折重建了注册系统,但我仍然遇到了这个bug。 我对如何调试它没有更多的想法,并且希望有人知道一种新方法来测试为什么会发生这种情况(或者强迫错误发生在我身上),或者一种更好的处理方式。

*我试图减少我的代码以包含相关的部分(它们是长文件),所以如果我还需要包含其他内容,请告诉我

编辑: @Greg Watters建议我编写多个'模糊'处理程序可用于管理多个输入的状态(如学生密码和确认学生密码)。接下来我会尝试,但如果其他人有其他想法,我会全力以赴。 更新这个问题没有变化

EDIT2 我创建了一封电子邮件,可以让我看到哪些输入标记为"无效"在用户单击表单上的提交之后,但在实际按钮触发之前。标记为"无效的输入"似乎是随机的

编辑3 一位朋友建议这可能是自动填充问题。因为我已经使用模糊事件触发了验证,并且自动完成功能可能不会触发此事件。我在提交按钮上添加了冗余验证,以检查是否可以解决问题

注册表单和验证工作方式

  • 所有必需的输入都以"无效"
  • 类开头
  • 当用户填写输入时,我使用js验证它,如果一切正常,我删除了课程"无效"。如果未经验证,我会在输入下方显示错误,以红色突出显示输入,并保持班级"无效"
  • 一旦用户按下"提交",我循环浏览表单上的每个输入并检查一类"无效"。如果任何输入仍包含类"无效",我会显示一条消息来修复表单底部的错误并以红色突出显示相关输入。如果没有输入包含类"无效",则表单提交。

错误期间会发生什么

  • 用户填写每个必需的输入,不会出现验证错误。当我在这个过程中通过电话与他们交谈时,每个人肯定他们已填写表格并提供有效信息并填写所有必需的输入
  • 用户点击提交,表单底部会显示错误,要求他们修正错误,但没有输入突出显示为红色,并且不会显示任何额外的输入错误。

表单验证

$("#signUp-submit").live("click", function() {
    $(".signUpError").empty();
    var error = false;
    $(".signUpTextbox").each(function() {
        if($(this).hasClass("invalid")) {
            $(".signUpError").text('Please correct errors');
            $(".invalid").css("background-color", "#ffcccc");
            $('html, body').animate({scrollTop:575}, 'slow');
            error = true;
            return false;
        }
    });
    if (error == false) {
        var customerType = $("#signUp-customerType").val();
        var school = $("#signUp-school").val();
        var studentEmail = $("#signUp-studentEmail").val();
        var studentFirstName = $("#signUp-studentFirstName").val();
        var studentLastName = $("#signUp-studentLastName").val();
        var studentPhone = $("#signUp-studentPhone").val();
        var studentPhoneCarrier = $("#signUp-studentPhoneCarrier").val();
        var studentAddress1 = $("#signUp-studentAddress1").val();
        var studentAddress2 = $("#signUp-studentAddress2").val();
        var parentEmail = $("#signUp-parentEmail").val();
        var parentAddress1 = $("#signUp-parentAddress1").val();
        var parentAddress2 = $("#signUp-parentAddress2").val();
        var parentCity = $("#signUp-parentCity").val();
        var parentState = $("#signUp-parentState").val();
        var parentZip = $("#signUp-parentZip").val();
        var parentPhone = $("#signUp-parentPhone").val();
        var referral = $("#signUp-referral").val();

        if (customerType == "student") {
            var studentPassword = $("#signUp-studentPassword").val();
        }
        else if (customerType == "parent") {
            var parentPassword = $("#signUp-parentPassword").val();
            var parentFirstName = $("#signUp-parentFirstName").val();
            var parentLastName = $("#signUp-parentLastName").val();
        }

        $(".footerSignUpContent").html('<div class = "loadingAnimationFooter" id = "loadingAnimation-FooterSignUp"></div>');

        $.post(
                'ajax/signUp.php', 
            {
                'customerType': customerType,
                'school': school,
                'studentEmail': studentEmail,
                'studentPassword': studentPassword,
                'studentFirstName': studentFirstName,
                'studentLastName': studentLastName,
                'studentPhone': studentPhone,
                'studentPhoneCarrier': studentPhoneCarrier,
                'studentAddress1': studentAddress1,
                'studentAddress2': studentAddress2,
                'parentAddress1': parentAddress1,
                'parentAddress2': parentAddress2,
                'parentCity': parentCity,
                'parentState': parentState,
                'parentZip': parentZip,
                'parentPassword': parentPassword,
                'parentFirstName': parentFirstName,
                'parentLastName': parentLastName,
                'parentEmail': parentEmail,
                'parentPhone': parentPhone,
                'referral': referral
            },
            function (response) {
                $("#footerTitle-SignUp").html("Thanks!");
                $(".footerSignUpContent").html(response);
            }
        );
    }
})

个人输入验证

$("#signUp-studentEmail").live("blur", function() {
    $(this).closest("tbody").find(".errorPlaceholder").empty();
    var studentEmail = $(this).val();
    $(this).addClass("invalid");
    $(this).css("background-color", "white");
    if(studentEmail != "") {
        var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
        if(!emailReg.test($(this).val())) {
            $(this).closest("tbody").find(".errorPlaceholder").text("Please enter a valid email");
            $(this).css("background-color", "#ffcccc");
        }
        else {
            $.post(
                'ajax/signUpValidateEmail.php', 
                {
                    'email': studentEmail
                },
                function (response) {
                    $("#signUp-studentEmail").closest("tbody").find(".errorPlaceholder").html(response);
                    var notValid = $("#signUpValidateEmail").val();
                    if (notValid == 0) {
                        $("#signUp-studentEmailRepeat").addClass("invalid");
                        $("#signUp-studentEmailRepeat").closest("tbody").find(".errorPlaceholder").empty();
                        $("#signUp-studentEmailRepeat").css("background-color", "white");
                        var studentEmailRepeat = $("#signUp-studentEmailRepeat").val();
                        if (studentEmail != studentEmailRepeat) {
                            $("#signUp-studentEmailRepeat").closest("tbody").find(".errorPlaceholder").text("Emails do not match");
                            $("#signUp-studentEmailRepeat").css("background-color", "#ffcccc");
                        }
                        else {
                            $("#signUp-studentEmailRepeat").removeClass("invalid");
                        }
                        $("#signUp-studentEmail").removeClass("invalid");
                    }
                    else {
                        $("#signUp-studentEmail").css("background-color", "#ffcccc");
                    }
                }
            );
        }
    }
    else {
        $("#signUp-studentEmail").css("background-color", "#ffcccc");
    }
});

$("#signUp-studentEmailRepeat").live("blur", function() {
    $(this).closest("tbody").find(".errorPlaceholder").empty();
    var studentEmailRepeat = $(this).val();
    $(this).addClass("invalid");
    $(this).css("background-color", "white");
    if(studentEmailRepeat != "") {
        var studentEmail = $("#signUp-studentEmail").val();
        if (studentEmail != studentEmailRepeat) {
            $(this).closest("tbody").find(".errorPlaceholder").text("Emails do not match");
            $(this).css("background-color", "#ffcccc");
        }
        else {
            $(this).removeClass("invalid");
        }
    }
    else {
        $(this).css("background-color", "#ffcccc");
    }
});

$("#signUp-parentEmail").live("blur", function() {
    $(this).closest("tbody").find(".errorPlaceholder").empty();
    var parentEmail = $(this).val();
    $(this).addClass("invalid");
    $(this).css("background-color", "white");
    if(parentEmail != "") {
        var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
        if(!emailReg.test($(this).val())) {
            $(this).closest("tbody").find(".errorPlaceholder").text("Please enter a valid email");
            $("#signUp-parentEmail").css("background-color", "#ffcccc");
        }
        else {
            $("#signUp-parentEmailRepeat").addClass("invalid");
            $("#signUp-parentEmailRepeat").closest("tbody").find(".errorPlaceholder").empty();
            $("#signUp-parentEmailRepeat").css("background-color", "white");
            var parentEmailRepeat = $("#signUp-parentEmailRepeat").val();
            if (parentEmail != parentEmailRepeat) {
                $("#signUp-parentEmailRepeat").closest("tbody").find(".errorPlaceholder").text("Emails do not match");
                $("#signUp-parentEmailRepeat").css("background-color", "#ffcccc");
            }
            $(this).removeClass("invalid");
        }
    }
    else {
        $(this).css("background-color", "#ffcccc");
    }
});

$("#signUp-parentEmailRepeat").live("blur", function() {
    $(this).closest("tbody").find(".errorPlaceholder").empty();
    var parentEmailRepeat = $(this).val();
    $(this).addClass("invalid");
    $(this).css("background-color", "white");
    if(parentEmailRepeat != "") {
        var parentEmail = $("#signUp-parentEmail").val();
        if (parentEmail != parentEmailRepeat) {
            $(this).closest("tbody").find(".errorPlaceholder").text("Emails do not match");
            $(this).css("background-color", "#ffcccc");
        }
        else {
            $(this).removeClass("invalid");
        }
    }
    else {
        $(this).css("background-color", "#ffcccc");
    }
});

$("#signUp-studentFirstName").live("blur", function() {
    var studentFirstName = $(this).val();
    $(this).addClass("invalid");
    $(this).css("background-color", "white");
    if(studentFirstName != "") {
        $(this).removeClass("invalid");
    }
    else {
        $(this).css("background-color", "#ffcccc");
    }
});

$("#signUp-studentLastName").live("blur", function() {
    var studentLastName = $(this).val();
    $(this).addClass("invalid");
    $(this).css("background-color", "white");
    if(studentLastName != "") {
        $(this).removeClass("invalid");
    }
    else {
        $(this).css("background-color", "#ffcccc");
    }
});

$("#signUp-studentPhone").live("blur", function() {
    $(this).closest("tbody").find(".errorPlaceholder").empty();
    var studentPhone = $(this).val();
    $(this).addClass("invalid");
    $(this).css("background-color", "white");
    if(studentPhone != "") {
        var phoneReg = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
        if(!phoneReg.test($(this).val())) {
            $(this).closest("tbody").find(".errorPlaceholder").text("Please enter a valid phone number");
            $(this).css("background-color", "#ffcccc");
        }
        else {
            $(this).removeClass("invalid");
        }
    }
    else {
        $(this).css("background-color", "#ffcccc");
    }
});

$("#signUp-studentAddress1").live("blur", function() {
    var studentAddress = $(this).val();
    $(this).addClass("invalid");
    $(this).css("background-color", "white");
    if(studentAddress != "") {
        $(this).removeClass("invalid");
    }
    else {
        $(this).css("background-color", "#ffcccc");
    }
});

$("#signUp-parentAddress1").live("blur", function() {
    var parentAddress1 = $(this).val();
    $(this).addClass("invalid");
    $(this).css("background-color", "white");
    if(parentAddress1 != "") {
        $(this).removeClass("invalid");
    }
    else {
        $(this).css("background-color", "#ffcccc");
    }
});

$("#signUp-parentCity").live("blur", function() {
    var parentCity = $(this).val();
    $(this).addClass("invalid");
    $(this).css("background-color", "white");
    if(parentCity != "") {
        $(this).removeClass("invalid");
    }
    else {
        $(this).css("background-color", "#ffcccc");
    }
});

$("#signUp-parentState").live("blur", function() {
    var parentState = $(this).val();
    $(this).addClass("invalid");
    $(this).css("background-color", "white");
    if(parentState != "") {
        $(this).removeClass("invalid");
    }
    else {
        $(this).css("background-color", "#ffcccc");
    }
});

$("#signUp-parentZip").live("blur", function() {
    var parentZip = $(this).val();
    $(this).addClass("invalid");
    $(this).css("background-color", "white");
    if(parentZip != "") {
        $(this).removeClass("invalid");
    }
    else {
        $(this).css("background-color", "#ffcccc");
    }
});

$("#signUp-studentPassword").live("blur", function() {
    $(this).closest("tbody").find(".errorPlaceholder").empty();
    var studentPassword = $(this).val();
    $(this).addClass("invalid");
    $(this).css("background-color", "white");
    if(studentPassword != "") {
        var passwordReg = /^.*(?=.{8,})(?=.*[a-zA-Z]).*$/;
        if(!passwordReg.test($(this).val())) {
            $(this).closest("tbody").find(".errorPlaceholder").text("Password must be at least 8 characters");
            $(this).css("background-color", "#ffcccc");

        }
        else {
            $("#signUp-studentPasswordRepeat").addClass("invalid");
            $("#signUp-studentPasswordRepeat").closest("tbody").find(".errorPlaceholder").empty();
            $("#signUp-studentPasswordRepeat").css("background-color", "white");
            var studentPasswordRepeat = $("#signUp-studentPasswordRepeat").val();
            if (studentPassword != studentPasswordRepeat) {
                $("#signUp-studentPasswordRepeat").closest("tbody").find(".errorPlaceholder").text("Passwords do not match");
                $("#signUp-studentPasswordRepeat").css("background-color", "#ffcccc");
            }
            $(this).removeClass("invalid");
        }
    }
    else {
        $(this).css("background-color", "#ffcccc");
    }
});

$("#signUp-studentPasswordRepeat").live("blur", function() {
    $(this).closest("tbody").find(".errorPlaceholder").empty();
    var studentPasswordRepeat = $(this).val();
    $(this).addClass("invalid");
    $(this).css("background-color", "white");
    if(studentPasswordRepeat != "") {
        var studentPassword = $("#signUp-studentPassword").val();
        if (studentPassword != studentPasswordRepeat) {
            $(this).closest("tbody").find(".errorPlaceholder").text("Passwords do not match");
            $(this).css("background-color", "#ffcccc");
        }
        else {
            $("#signUp-studentPasswordRepeat").removeClass("invalid");
        }
    }
    else {
        $(this).css("background-color", "#ffcccc");
    }
});

$("#signUp-parentPassword").live("blur", function() {
    $(this).closest("tbody").find(".errorPlaceholder").empty();
    var parentPassword = $(this).val();
    $(this).addClass("invalid");
    $(this).css("background-color", "white");
    if(parentPassword != "") {
        var passwordReg = /^.*(?=.{8,})(?=.*[a-zA-Z]).*$/;
        if(!passwordReg.test($(this).val())) {
        $(this).closest("tbody").find(".errorPlaceholder").text("Password must be at least 8 characters");
        $(this).css("background-color", "#ffcccc");
        }
        else {
            $(this).removeClass("invalid");
        }
    }
    else {
        $(this).css("background-color", "#ffcccc");
    }
});

$("#signUp-parentPasswordRepeat").live("blur", function() {
    $(this).closest("tbody").find(".errorPlaceholder").empty();
    var parentPasswordRepeat = $(this).val();
    $(this).addClass("invalid");
    $(this).css("background-color", "white");
    if(parentPasswordRepeat != "") {
        var parentPassword = $("#signUp-parentPassword").val();
        if (parentPassword != parentPasswordRepeat) {
            $(this).closest("tbody").find(".errorPlaceholder").text("Passwords do not match");
            $(this).css("background-color", "#ffcccc");
        }
        else {
            $("#signUp-parentPasswordRepeat").addClass("invalid");
            $("#signUp-parentPasswordRepeat").closest("tbody").find(".errorPlaceholder").empty();
            $("#signUp-parentPasswordRepeat").css("background-color", "white");
            var parentPasswordRepeat = $("#signUp-parentPasswordRepeat").val();
            if (parentPassword != parentPasswordRepeat) {
                $("#signUp-parentPasswordRepeat").closest("tbody").find(".errorPlaceholder").text("Passwords do not match");
                $("#signUp-parentPasswordRepeat").css("background-color", "#ffcccc");
            }
            $("#signUp-parentPasswordRepeat").removeClass("invalid");
        }
    }
    else {
        $(this).css("background-color", "#ffcccc");
    }
});

$("#signUp-parentFirstName").live("blur", function() {
    var parentFirstName = $(this).val();
    $(this).addClass("invalid");
    $(this).css("background-color", "white");
    if(parentFirstName != "") {
        $(this).removeClass("invalid");
    }
    else {
        $(this).css("background-color", "#ffcccc");
    }
});

$("#signUp-parentLastName").live("blur", function() {
    var parentLastName = $(this).val();
    $(this).addClass("invalid");
    $(this).css("background-color", "white");
    if(parentLastName != "") {
        $(this).removeClass("invalid");
    }
    else {
        $(this).css("background-color", "#ffcccc");
    }
});

$("#signUp-parentPhone").live("blur", function() {
    $(this).closest("tbody").find(".errorPlaceholder").empty();
    var parentPhone = $(this).val();
    $(this).addClass("invalid");
    $(this).css("background-color", "white");
    if(parentPhone != "") {
        var phoneReg = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
        if(!phoneReg.test($(this).val())) {
            $(this).closest("tbody").find(".errorPlaceholder").text("Please enter a valid phone number");
            $(this).css("background-color", "#ffcccc");
        }
        else {
            $(this).removeClass("invalid");
        }
    }
    else {
        $(this).css("background-color", "#ffcccc");
    }
});

表单的HTML

<table class="signUpTable">
    <tbody>
        <tr>
            <td class="signUpTextboxTitle">Email*</td>
            <td class="signUpTextboxCell">
                <input type="text" class="invalid signUpTextbox" id="signUp-studentEmail" placeholder="student email">
            </td>
        </tr>
        <tr>
            <td></td>
            <td class="errorPlaceholder"></td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td class="signUpTextboxTitle">Repeat Email*</td>
            <td class="signUpTextboxCell">
                <input type="text" class="invalid signUpTextbox" id="signUp-studentEmailRepeat" placeholder="repeat email">
            </td>
        </tr>
        <tr>
            <td></td>
            <td class="errorPlaceholder"></td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td class="signUpTextboxTitle">Password*</td>
            <td class="signUpTextboxCell">
                <input type="password" class="invalid signUpTextbox" id="signUp-studentPassword" placeholder="password">
            </td>
        </tr>
        <tr>
            <td></td>
            <td class="errorPlaceholder"></td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td class="signUpTextboxTitle">Repeat Password*</td>
            <td class="signUpTextboxCell">
                <input type="password" class="invalid signUpTextbox" id="signUp-studentPasswordRepeat" placeholder="repeat password">
            </td>
        </tr>
        <tr>
            <td></td>
            <td class="errorPlaceholder"></td>
        </tr>
    </tbody>
    <tbody>
        <tr>
        <td class="signUpTextboxTitle">First Name*</td>
        <td class="signUpTextboxCell">
            <input type="text" class="invalid signUpTextbox" id="signUp-studentFirstName" placeholder="first name">
        </td>
    </tr>
    </tbody>
    <tbody>
        <tr>
            <td class="signUpTextboxTitle">Last Name*</td>
            <td class="signUpTextboxCell">
                <input type="text" class="invalid signUpTextbox" id="signUp-studentLastName" placeholder="last name">
            </td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td class="signUpTextboxTitle">Cell Phone*</td>
            <td class="signUpTextboxCell">
                <input type="text" class="invalid signUpTextbox" id="signUp-studentPhone" placeholder="cell phone">
            </td>
        </tr>
        <tr>
            <td></td>
            <td class="errorPlaceholder"></td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td class="signUpTextboxTitle">Phone Carrier</td>
            <td class="signUpTextboxCell">
                <input type="text" class="signUpTextbox" id="signUp-studentPhoneCarrier" placeholder="phone carrier">
            </td>
        </tr>
    </tbody>
    <tr>
        <td colspan="2"><hr></hr></td>
    </tr>
    <tbody>
        <tr>
            <td colspan="2" class="signUpInstructions">Your local address must be within the city of <?php echo $footerLocation; ?>
            </td>
        </tr>
        <tr>
            <td class="signUpTextboxTitle">Student Address*</td>
            <td class="signUpTextboxCell">
                <input type="text" class="invalid signUpTextbox" id="signUp-studentAddress1" placeholder="student address 1">
                <br />
                <input type="text" class="signUpTextbox" id="signUp-studentAddress2" placeholder="student address 2">
            </td>
        </tr>
    </tbody>
    <tr>
        <td colspan="2"><hr></hr></td>
    </tr>
    <tbody>
        <tr>
            <td class="signUpTextboxTitle">Parent Email*</td>
            <td class="signUpTextboxCell">
                <input type="text" class="invalid signUpTextbox" id="signUp-parentEmail" placeholder="parent email">
            </td>
        </tr>
        <tr>
            <td></td>
            <td class="errorPlaceholder"></td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td class="signUpTextboxTitle">Repeat Email*</td>
            <td class="signUpTextboxCell">
                <input type="text" class="invalid signUpTextbox" id="signUp-parentEmailRepeat" placeholder="repeat parent email">
            </td>
        </tr>
        <tr>
            <td></td>
            <td class="errorPlaceholder"></td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td class="signUpTextboxTitle">Permanent or Parent Address*</td>
            <td class="signUpTextboxCell">
                <input type="text" class="invalid signUpTextbox" id="signUp-parentAddress1" placeholder="parent address 1">
                <br />
                <input type="text" class="signUpTextbox" id="signUp-parentAddress2" placeholder="parent address 2">
            </td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td class="signUpTextboxTitle">City*</td>
            <td class="signUpTextboxCell">
                <input type="text" class="invalid signUpTextbox" id="signUp-parentCity" placeholder="city">
            </td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td class="signUpTextboxTitle">State*</td>
            <td class="signUpTextboxCell">
                <input type="text" class="invalid signUpTextbox" id="signUp-parentState" placeholder="state">
            </td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td class="signUpTextboxTitle">Zip*</td>
            <td class="signUpTextboxCell">
                <input type="text" class="invalid signUpTextbox" id="signUp-parentZip" placeholder="zip">
            </td>
        </tr>
        <tr>
            <td colspan="2" class="signUpInstructions">Parents use their own email address and password to login to a linked account. We will email them details.</td>
        </tr>
    </tbody>
    <tr>
        <td colspan="2"><hr></hr></td>
    </tr>
    <tbody>
        <tr>
            <td class="signUpTextboxTitle">How did you head about us?</td>
            <td class="signUpTextboxCell">
                <input type="text" class="signUpTextbox" id="signUp-referral" placeholder="referral">
            </td>
        </tr>
    </tbody>
    <tr>
        <td colspan="2"><hr></hr></td>
    </tr>
    <tr>
        <td class="signUpInstructions">*required</td>
    </tr>
    <tr>
        <td colspan="2"><input type = "submit"  class = "toolbarButton footerMiddleAlignRight" id = "signUp-submit" value = "Sign Up"></td>
    </tr>
    <tr>
        <td colspan="2" class="signUpError"></td>
    </tr>
    <tr>
        <td colspan="2"><input type = "text" class = "hiddenInput" id = "signUp-customerType" value = "<?php echo $customerType; ?>"></td>
    </tr>
    <tr>
        <td colspan="2"><input type = "text" class = "hiddenInput" id = "signUp-school" value = "<?php echo $school; ?>"></td>
    </tr>
</table>

1 个答案:

答案 0 :(得分:2)

这是一个假设:大多数blur处理程序“立即”从其元素中删除invalid类(即,在事件处理程序中同步)。但是有一个没有:#signUp-studentEmail处理程序启动POST请求,只删除AJAX成功函数中的invalid。如果用户在编辑其电子邮件地址后快速单击“注册”(在AJAX完成之前),事件的顺序可能如下所示:

  1. click处理程序运行,在电子邮件文本框中看到invalid,报告错误。
  2. AJAX完成后,从文本框中清除invalid
  3. 因此用户会看到错误,但没有文本框会显示红色。

    如果您无法通过最后编辑电子邮件字段然后单击“注册”来重现此操作,则可能有助于向AJAX添加延迟 - 通过将其启动延迟到setTimeout,或添加延迟到服务器上的signUpValidateEmail.php