Как я могу отладить эту ошибку проверки, когда я не могу ее воспроизвести?

Question

Я построил форму регистрации на своем веб-сайте, которая была (по-видимому) случайной ошибкой примерно для 3% моих пользователей (просто оценка). Ошибка запрещает пользователю подписываться на мой сервис, и им часто приходится звонить в офис, чтобы мы могли вручную добавить их в качестве нового клиента. Это требует от нас довольно много времени на телефоне и потенциально может стоить нам бизнеса для тех пользователей, которые решают не звонить, а вместо этого идут к конкуренту.

Я попытался отлаживать это много раз и даже перестроил систему регистрации в прошлом году из-за разочарования, но я все еще сталкиваюсь с ошибкой. У меня просто нет больше идей о том, как отлаживать его, и надеялся, что кто-то задумается о новом способе проверить, почему это может произойти (или заставить ошибку произойти для меня), или лучший способ обрабатывая его.

* Я пытался урезать свой код, чтобы просто включить соответствующие части (они длинные файлы), поэтому, пожалуйста, дайте мне знать, если есть что-то еще мне нужно включить

EDIT: @Greg Уоттерс предположил, что я пишу общие функции, которые могут использовать несколько обработчиков размытия для управления состоянием для нескольких входов (например, пароль для студентов и подтверждение пароля для учащихся). Я буду пытаться это сделать дальше, но если у кого-то еще есть дополнительные идеи, я все уши. UPDATE Это не имеет никаких изменений по этому вопросу

EDIT2 я создал электронную почту, которая позволяет мне видеть, какие входы помечено как «недопустимые» сразу после того, как пользователь нажмет представить в форме, но до кнопки фактической стрельбы , Входы, отмеченные как «недействительные», были, по-видимому, случайными

EDIT 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> 

Answer 1

Вот гипотеза: большинство обработчиков blur удаляют класс invalid из своих элементов «сразу» (т. Е. Синхронно в обработчике событий). Но есть тот, который этого не делает: обработчик #signUp-studentEmail запускает запрос POST и удаляет только invalid в функции успеха AJAX. Если пользователь щелкает Регистрацию быстро после редактирования их адресов электронной почты (до завершения, что AJAX), порядок событий может выглядеть следующим образом:

1. click обработчик бежит, видит invalid на электронном текстовом поле, сообщает об ошибке.
2. AJAX завершает, очищает invalid от текстового поля.

Таким образом, пользователь увидит ошибку, но никаких текстовых полей не будет красным.

Если вы не можете воспроизвести это просто путем редактирования поля электронной почты в прошлом, а затем нажав на ссылку вверх, это может помочь добавить задержку в AJAX - либо задержки его запуска с setTimeout, или путем добавления задержки в signUpValidateEmail.php на сервере.