Question

我有一个验证一个字段的表单。警告框出现错误并且div更改，但页面继续提交。我需要帮助弄清楚它为什么还在继续。

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

如果您在验证后在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; 
}

Answer 2

所以我通过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!

Javascript验证：页面仍在提交

2 个答案: