Question

js validation works perfectly when I step through it, but fails at “normal speed.” SPECIFICALLY: if a dup email is caught but the other fields are filled in correctly, the form can be submitted (but no error is forthcoming when stepping through the code). Has anyone seen this before? I know I could just code it a different way, but I cannot simply walk away from this simple problem that’s even become a bottle kneck without first understanding why this isn’t working.

My approach is to validate onblur and onsubmit. I am using the jquery selector only for convenience and then again for an ajax call, but otherwise i’m using js. I am doing a loop through the fields but only operating on text and password fields.
checking for blanks
checking for no numbers in name
checking for email address properly formatted
and then checking for unique email in the email field
annotated code below for js and form below:

//registration validation
$('.validate').blur(function() {
var theForm = document.registerNewUserForm;         
//removes error messages from html before the run
clearAllErrors(theForm);
var msg = "";
var mdiv;
theForm.submit.disabled=true;
document.getElementById("submitButton").disabled = true;

for (var i = 0; i < theForm.elements.length; i++) {

    //mdiv is set to form element being evaluated at the time
    mdiv = document.getElementById(theForm.elements[i].name + "Message");

    msg = validateField(theForm.elements[i]);
    if(msg != "") {
        mdiv.innerHTML = msg;
        break;
    }
}
if(msg == "") {
    theForm.submit.disabled=false;
    document.getElementById("submitButton").disabled = false;
}
});


$('#registerNewUserForm').submit(function() {
var theForm = document.registerNewUserForm;
clearAllErrors(theForm);
var msg = "";
var mdiv;
for (var i = 0; i < theForm.elements.length; i++) {

    //mdiv is set to form element being evaluated at the time
    mdiv = document.getElementById(theForm.elements[i].name + "Message");

    msg = validateField(theForm.elements[i]);
    if(msg != "") {
        break;
    }
}
if (msg != ""){
    mdiv.innerHTML = msg;
    return false;       
}  else {
    theForm.submit();
}   
});

function validateField(theField) {
msg = "";   
//all fields are required
if (theField.type == "text" || theField.type == "password") {
    if (theField.value == "") {
        msg = "The " + theField.name + " field is required.";
    }
}

//name fields are non-numeric
if (theField.name == "fullName"){
    if (hasNumber(theField.value) == true){
        msg= "The Name field is non-numeric.";
    }
}

//email must be correctly formatted
if (theField.name == "email") {
    msg = emailCheck (theField.value);
    if (msg == "") {
        //email address must also be unique
        chkEmail();
        msg = document.getElementById('emailMessage').innerHTML;
    }
}   
return msg;
}

function chkEmail() {
emailAddr = document.getElementById("email").value;
$.ajax({
    url: '/chkEmail',
    type: 'POST',
    data: 'emailAddr=' + encodeURIComponent(emailAddr),
    dataType: "xml",
    context: document.body,
    success: function(data) {
        document.getElementById('emailMessage').innerHTML = $(data).find("message").text();
    }
});
}


<form name="registerNewUserForm" id="registerNewUserForm" action="/register" method="post">
    <br/>
    <div>Create an Account and join the fun!</div>
    <div><input class="validate" type="text" id="fullName" required placeholder="Full Name" name="fullName" value="" size="30"></div>
    <div id="fullNameMessage" class="error"></div>
    <div><input class="validate" type="text" id="email" required placeholder="Email Address" name="email" value="" size="30"></div>
    <div id="emailMessage" class="error"></div>
    <div><input class="validate" type="password" id="passWord" required placeholder="Password" name="passWord" value="" size="30"></div>
    <div id="passWordMessage" class="error"></div>
    <div style="position:relative;left:173px;"><input id="submitButton" type="submit" value="Signup for PastelPlanet"></div>
    <input type="hidden" name="formName" value="registerNewUserForm">
    <input type="hidden" name="urlDestination" value="">
</form>

Answer 1

Your “chkEmail” function involves a call to the server, and it’s asynchronous. The call to the server will not be complete when the function returns, when you’re running at “full speed”.