0

1 つのフィールドを検証するフォームがあります。エラーが発生すると警告ボックスが表示され、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>
4

2 に答える 2

0

だから私はjsbeautifierを介してコードを実行しましたそれはあなたのコードにランダム0を示しています。エラーメッセージも確認してください。すべての行に同じエラーをコピーしました。開始タグはありません<p>。

フォームが送信される理由は、おそらくコードのどこかにあるJSエラーが原因です。JavaScriptコンソールでデバッガーを有効にします。コンソールに移動して入力します

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

コンソールにエラーが表示されますか？

これを行うと、nullエラーが表示されます。なんで？IDではなく名前があるからです。

document.getElementById('error').innerHTML <--I am looking for an id
<td name='error'>  <-- I am not an id!
于 2012-08-23T20:09:10.773 に答える
0

検証後に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; 
}
于 2012-08-23T20:03:05.997 に答える