1

js検証は、ステップスルーすると完全に機能しますが、「通常の速度」では失敗します。 具体的には、重複した電子メールがキャッチされたが、他のフィールドが正しく入力されている場合、フォームを送信できます（ただし、コードをステップスルーするときにエラーは発生しません）。誰かがこれを見たことがありますか？別の方法でコーディングできることはわかっていますが、なぜこれが機能しないのかを最初に理解しなければ、ボトルのコツにさえなるこの単純な問題から簡単に離れることはできません。

私のアプローチは、onblurとonsubmitを検証することです。私はjqueryセレクターを便宜上使用し、次にajax呼び出しに使用していますが、それ以外の場合はjsを使用しています。フィールドをループしていますが、テキストフィールドとパスワードフィールドのみを操作しています。空白をチェックする名前に数字がないことをチェックする適切にフォーマットされた電子メールアドレスをチェックする次に、以下のjsとフォームの電子メールフィールドの注釈付きコードで一意の電子メールをチェックします。

//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>
4

1 に答える 1

2

「chkEmail」関数にはサーバーへの呼び出しが含まれ、非同期です。「フルスピード」で実行している場合、関数が戻ったときにサーバーへの呼び出しは完了しません。

于 2012-06-26T13:28:36.550 に答える