使用提交按鈕功能在javascript中調試問題

這段代碼似乎正在做我想做的事，直到用戶單擊提交的部分和validateInput（）函數應該提交表單或發送錯誤警報消息。我無法弄清楚代碼有什麼問題。使用提交按鈕功能在javascript中調試問題

任何人都可以幫忙嗎？

這是鏈接到實際的代碼 - http://ciswebs.smc.edu/cis55/naruse_kevin_k/week2/default.html

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
    <title>Week 2 cis 55</title> 
    <script type="text/javascript"> 

     function validateText(inputField, helpText) 
     { 
      if (inputField.value.length == 0) 
      { 
       if (helpText != null) 
       { 
        helpText.innerHTML = "please enter a value"; 
       } 
       return false; 
      } 
      else 
      { 
       if (helpText != null) 
       { 
        helpText.innerHTML = /*inputField.value.length + */""; 
       } 
       return true; 
      } 
     } 

     function validate_zip_code(inputField, helpText) 
     { 
      var isnumber = true; var is5chars = true; 
      if (isNaN(inputField.value)) 
      { 
       //alert("not a number"); 
       if (helpText != null) 
       { 
        helpText.innerHTML = /*inputField.value.length +*/ "please enter a numeric value"; 
       } 
       return false; 
      } 
      else if (inputField.value.length != 5) 
      { 
       //alert("not 5 digits") 
       if (helpText != null) 
       {     
        helpText.innerHTML = /*inputField.value.length +*/ "please enter a valid zip code with 5 digits"; 
       } 
       return false; 
      } 
      else 
      { 
       if (helpText != null) 
       { 
        helpText.innerHTML = ""; 
       } 
      //alert("passed the test"); 
       return true; 
      } 
     } 
     function submit_validate(form) 
     { //alert("check everything except zip"); 
      if (validateText(form["first_name"], form["first_name_help"]) && 
       validateText(form["last_name"], form["last_name_help"]) && 
       validateText(form["street"], form["street_help"]) && 
       validateText(form["city"], form["city_help"]) &&  
       validateText(form["state"], form["state_help"]) && 
       validate_zip_code(form["zip"], form["zip_help"]) 
      ) 
      { 
       alert("so far - validated everyting else next check zip code"); 
       // on this next if/then 
       alert("yay - ready to submit now"); 
       form.submit(); 


      } 
      else  
      { alert("we didn't even get to zip, smething else is wrong"); 
       alert("one or more fields were incorect. please correct before submitting");  
       return false;  
      }   
     } 
     function submit_validate1(form) 
     { //alert("check everything except zip"); 
      if (validateText(form["first_name"], form["first_name_help"]) && 
       validateText(form["last_name"], form["last_name_help"]) && 
       validateText(form["street"], form["street_help"]) && 
       validateText(form["city"], form["city_help"]) &&  
       validateText(form["state"], form["state_help"]) 
      ) 
      { 
       //alert("so far - validated everyting else next check zip code"); 
       // on this next if/then 
       if (validate_zip_code(form["zip"], form["zip_help"])) 
       { 
        form.submit(); 
        alert("yay - ready to submit now");  
       } 
       else 
       { 
        alert("your zip isn't valid - please correct the info and resubmit"); 
       } 
      } 
      else  
      { alert("we didn't even get to zip, smething else is wrong"); 
       alert("one or more fields were incorect. please correct before submitting");    
      }   
     } 

    </script> 
</head> 

<body 
<form action="" method="post" name="address_form"> 
    <fieldset> 
     <p> 
      <label>First Name:</label> 
      <input name="first_name" id="first_name" type="text" 
       onblur="validateText(this, document.getElementById('first_name_help'));" /> 
      <span id="first_name_help" class="help"></span> 
     </p> 
     <p> 
      <label>Last Name:</label> 
      <input name="last_name" id="last_name" type="text" 
       onblur="validateText(this, document.getElementById('last_name_help'));"> 
      <span id="last_name_help" class="help"></span> 

     </p> 
     <p> 
      <label>Street</label> 
      <input name="street" id="street" type="text" 
       onblur="validateText(this, document.getElementById('street_help'));"> 
      <span id="street_help" class="help"></span> 
     </p> 
     <p> 
      <label>City</label> 
      <input name="city" id="city" type="text" 
       onblur="validateText(this, document.getElementById('city_help'));"> 
      <span id="city_help" class="help"></span> 
     </p> 
     <p> 
      <label>State</label> 
      <input name="state" id="state" type="text" 
       onblur="validateText(this, document.getElementById('state_help'));"> 
      <span id="state_help" class="help"></span> 
     </p> 
     <p> 
      <label>Zip</label> 
      <input name="zip" type="text" 
       onblur="validate_zip_code(this, document.getElementById('zip_help'));"> 
      <span id="zip_help" class="help"></span> 
     </p> 
     <p> 
      <input name="submit" type="submit" id="submit" value="submit" 
       onclick="return submit_validate(this.form);"> 
     </p> 
    </fieldset> 
</form> 
</body> 
</html>

來源

2014-10-08 Devin K Naruse

您是否嘗試過使用開發人員工具對其進行調試瀏覽器。 – 2014-10-08 00:26:44

將點擊監聽器從提交按鈕移動到表單的onsubmit處理程序，可以在不點擊提交按鈕的情況下提交表單。從提交按鈕中刪除名稱和ID（名稱或ID爲「submit」的表單控件會掩蓋表單的提交方法，因此您無法調用它）。 – RobG 2014-10-08 00:38:24

這是我怎麼會寫驗證功能。你已經整齊地掛與相關表單控件名稱錯誤消息的元素，所以用它來你的優勢：

function validateText(node) { 
     var msgEl = document.getElementById(node.name + '_help'); 

     if (node.value.length == 0) { 
     msgEl.innerHTML = "please enter a value"; 
     return false; 
     } 
     msgEl.innerHTML = ''; 
     return true; 
    } 

    function validate_zip_code(node) { 
     var msgEl = document.getElementById(node.name + '_help'); 
     var value = node.value; 

     if (!/^\d{5}$/.test(node.value)) { 
     msgEl.innerHTML = 'ZIP code must be 5 digits'; 
     return false 
     } 
     msgEl.innerHTML = ''; 
     return true; 
    }

這些功能現在可以控制的名單被稱爲所以你不必叫他們做單獨爲每個控制，例如

validateText('first-name', 'last_name', 'street',...)

我會把這個改變留給你。 :-)

下面有submit_validate功能的最小的重寫，它仍然需要進行一些清理工作：

function submit_validate(form) { 

     if (validateText(form["first_name"]) && 
      validateText(form["last_name"]) && 
      validateText(form["street"]) && 
      validateText(form["city"]) && 
      validateText(form["state"]) && 
      validate_zip_code(form["zip"]) 
     ) 
     { 
     alert("so far - validated everyting else next check zip code"); 
     // on this next if/then 
     alert("yay - ready to submit now"); 
     return true; 

     } else { 
     alert("one or more fields were incorect. please correct before submitting"); 
     return false; 
     } 
    }

的提交監聽器應該在表格上，以便它被調用時表單被提交，因爲可以提交表單而無需點擊提交按鈕。

此外，使用名稱或ID爲「submit」的表單控件會掩蓋表單的提交方法，因此您無法調用它。提交按鈕不需要任何名稱或ID（或者甚至是值，儘管您可能想給它一個），因此只需將其刪除：

<form ... onsubmit="return submit_validate(this);"> 

    ... 

    <p> 
     <input type="submit"> 
    </p> 
</form>

來源

2014-10-08 00:59:08 RobG

使用提交按鈕功能在javascript中調試問題

回答

相關問題