我在我的网站上建立了一个注册表单(似乎)随机错误地为我的用户提供了大约3%(只是估计)。该错误不允许用户注册我的服务,他们经常需要致电办公室,以便我们可以手动将其添加为新客户。这花费了我们相当多的时间在电话上,并且可能使那些决定不打电话的用户花费我们的业务,而是去竞争对手。
我已经尝试过多次这样的调试,甚至在过去的一年里也因为挫折重建了注册系统,但我仍然遇到了这个bug。 我对如何调试它没有更多的想法,并且希望有人知道一种新方法来测试为什么会发生这种情况(或者强迫错误发生在我身上),或者一种更好的处理方式。
*我试图减少我的代码以包含相关的部分(它们是长文件),所以如果我还需要包含其他内容,请告诉我
编辑: @Greg Watters建议我编写多个'模糊'处理程序可用于管理多个输入的状态(如学生密码和确认学生密码)。接下来我会尝试,但如果其他人有其他想法,我会全力以赴。 更新这个问题没有变化
EDIT2 我创建了一封电子邮件,可以让我看到哪些输入标记为"无效"在用户单击表单上的提交之后,但在实际按钮触发之前。标记为"无效的输入"似乎是随机的
编辑3 一位朋友建议这可能是自动填充问题。因为我已经使用模糊事件触发了验证,并且自动完成功能可能不会触发此事件。我在提交按钮上添加了冗余验证,以检查是否可以解决问题
注册表单和验证工作方式
错误期间会发生什么
表单验证
$("#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>
答案 0 :(得分:2)
这是一个假设:大多数blur
处理程序“立即”从其元素中删除invalid
类(即,在事件处理程序中同步)。但是有一个没有:#signUp-studentEmail
处理程序启动POST请求,只删除AJAX成功函数中的invalid
。如果用户在编辑其电子邮件地址后快速单击“注册”(在AJAX完成之前),事件的顺序可能如下所示:
click
处理程序运行,在电子邮件文本框中看到invalid
,报告错误。invalid
。因此用户会看到错误,但没有文本框会显示红色。
如果您无法通过最后编辑电子邮件字段然后单击“注册”来重现此操作,则可能有助于向AJAX添加延迟 - 通过将其启动延迟到setTimeout
,或添加延迟到服务器上的signUpValidateEmail.php
。