Javascript驗證：網頁仍提交

Question

我有一個表單驗證一個字段。警告框出現在一個錯誤和divs改變，但該頁面繼續提交。我需要幫助弄清楚它爲什麼還在繼續。

的Javascript：

function validateFormOnSubmit(theForm) { 
    var reason = ''; 

    reason += validateName(theForm.signature_name); 

    if (reason != '') { 
     document.getElementById('error').innerHTML = "<p>* All fields are required.<br><span style='color:red'><strong><u>Some fields need correction:</u></strong></span></p>" // + reason;  
     //alert("Some fields need correction:\n" + reason); 
     return false; 
    } 
    return true; 
} 

function validateName(fld) { 
    var error = ''; 
    var illegalChars = /\W\s/; // allow letters, numbers, and underscores 

    if (fld.value == '') { 
     error = document.getElementById('client_name').innerHTML = "<h2 id='client_name' style='color:red'>Client's Last Name:</h2><br>The required field has not been filled in."; 
     alert("Do Not Continue"); 
    } else if ((fld.value.length < 2) || (fld.value.length > 15)) { 
     error = document.getElementById('client_name').innerHTML = "<h2 id='client_name' style='color:red'>Client's Last Name:</h2><br>The name is not long enough."; 
     alert("Do Not Continue"); 
    } else if (illegalChars.test(fld.value)) { 
     error = document.getElementById('client_name').innerHTML = "<h2 id='client_name' style='color:red'>Client's Last Name:</h2><br>The name field contains illegal characters."; 
     alert("Do Not Continue"); 
    } 
    return error; 
} 

HTML

<form enctype='multipart/form-data' name='finishJob' id='finishJob' action='finishJob.php' method='POST' onsubmit='return validateFormOnSubmit(this)'> 
    <table width='95%' class='tablebox'> 
     <tr><td name='error'></td><td><h2>Upload Signature:</h2></br><input name='uploadedfile' id='uploadedfile' type='file' /></td><td><h2 id='client_name'>Client's Last Name:</h2></br><input type='text' id='signature_name' name='signature_name'></td><td><input type='submit' value='Complete Job' class='link-button'></td></tr> 
    </table> 
</form> 

Answer 1

所以我通過jsbeautifier運行的代碼都會在你的代碼的隨機0。也看看你的錯誤消息。你在每一行都複製了相同的錯誤。你沒有開放<p>標籤。

表單提交的原因可能是因爲您的代碼中存在JS錯誤。在您的JavaScript控制檯上啓用調試器。轉到控制檯並輸入

validateFormOnSubmit(document.getElementById("finishJob")); 

錯誤是否顯示在控制檯中？

而當你這樣做時，你會看到一個空錯誤。爲什麼？因爲你有一個名字而不是一個id。

document.getElementById('error').innerHTML <--I am looking for an id 
<td name='error'> <-- I am not an id! 

Answer 2

如果你提交表單的驗證後的JavaScript？像這樣：

<form enctype='multipart/form-data' name='finishJob' id='finishJob' action='finishJob.php' method='POST' onsubmit='javascript:validateFormOnSubmit(this);return false;'> 
    <table width='95%' class='tablebox'> 
     <tr><td name='error'></td><td><h2>Upload Signature:</h2></br><input name='uploadedfile' id='uploadedfile' type='file' /></td><td><h2 id='client_name'>Client's Last Name:</h2></br><input type='text' id='signature_name' name='signature_name'></td><td><input type='submit' value='Complete Job' class='link-button'></td></tr> 
    </table> 
</form> 

function validateFormOnSubmit(theForm) { 
var reason = ''; 

    reason += validateName(theForm.signature_name); 

    if (reason != '') { 
document.getElementById('error').innerHTML="<p>* All fields are required.<br><span style='color:red'><strong><u>Some fields need correction:</u></strong></span></p>"// + reason; 
//alert("Some fields need correction:\n" + reason); 
return false; 
    } 
    document.finishJob.submit(); 
    return true; 
}