Javascript驗證在提交時無法正常工作

我一直在開發我的第一個網站，並且遇到了javascript驗證腳本的問題。我的代碼：Javascript驗證在提交時無法正常工作

<html> 
    <head> 
     <title>Territory</title> 
    </head> 
    <body> 

     <script type="text/javascript"> //Main Javascript function giving me issues 
    function validate(form) 
    { 
     fail = validateTerrNum(document.checkOut.numberOut.value); 
     fail += validateFirstName(document.checkOut.fName.value); 
     fail += validateLastName(document.checkOut.lName.value); 
     if (fail == "") 
    return true; 
     else 
     { 
     alert(fail); 
     return false; 
     } 
    } 
     </script> 
     <script type="text/javascript> 
     function validateTerrNumber(field) 
     { 
    if (field == "") return "No territory number was entered. \n"; 
    else if (field.length > 3) 
    return "Territory numbers must be less than four characters. \n"; 
    else if (/[^0-9]/.test(field)) 
     return "Only 0-9 allowed in territory number. \n"; 
    return ""; 
     } 

     //Note: Does not sanitize string 
     function validateFirstName(field) 
     { 
    if (field == "") return "No first name was entered. \n"; 
    return ""; 
     } 

     //Again, note that this function does not sanitize string 
     function validateLastName(field) 
     { 
    if (field == "") return "Not last name was entered. \n"; 
    return ""; 
     } 
     </script> 

     <table border="0" cellpadding="2" cellspacing="5"> 
    <th colspan="2" align="center">Check Out</th> 
     <form name="checkOut" method="post" onSubmit="validate(this)"> 
    <tr><td>Territory Number</td><td><input type="text" name="numberOut"  tabindex="1" maxlength="3" size="3" /></td> 
        </tr><tr><td>First Name of Holder</td><td><input type="text" name="fName" tabindex="2" maxlength="15"/></td> 
        </tr><tr><td>Last Name of Holder</td><td><input type="text" name="lName" tabindex="3" maxlength="15" /></td> 
        </tr><tr><td><input type ="checkbox" name="specialC" tabindex="4" value="Yes"/> Special Campaign</td> 
        </tr><tr><td></td><td><input type="submit" value="Check Out" /></td> 
       </form> 
      </table> 
</body> 
</html>

它顯然格式不好 - 複製和粘貼的結果。更具體地說，這個問題是與JavaScript驗證。當我點擊「簽出」時，驗證並不會阻止我投入不良數值。該腳本非常簡單，但由於某種原因，我無法弄清楚它是怎麼回事（我對JavaScript相當陌生）。

我知道這個問題不是我的瀏覽器，因爲我有很多javascripts在其中運行。我能想到的唯一的事情是表單沒有方法。這將是另一種驗證，但用PHP編寫 - JavaScript實際上只是客戶端的預驗證。

任何幫助，將不勝感激。

-Mlagma

來源

2012-08-15 Mlagma

你爲什麼不試着讓你的「提交」按鈕，然後從按鈕調用你的Java腳本。如果驗證通過，只需調用form.submit（）; – Sap 2012-08-15 05:25:39

要停止提交走在前面驗證失敗後，您需要：

onSubmit="return validate(this)"

，代替目前的代碼：

onSubmit="validate(this)"

你validate()功能已經返回true或false，但這些值不從事件處理程序本身返回。如果你認爲onSubmit=""之間的代碼作爲函數的主體，這是有道理的。

而且，正如Temumu指出的那樣，當您實際上已將該函數聲明爲validateTerrNumber時，您的validate()函數會嘗試調用名爲validateTerrNum的函數。

這些問題的糾正，你可以看到它在這裏工作：http://jsfiddle.net/nnnnnn/Wvcy3/

來源

2012-08-15 05:30:41 nnnnnn

你阻止了我從未遇到的問題，我還沒有遇到，謝謝。 – Mlagma 2012-08-15 05:36:09

您此行validate()：

fail = validateTerrNum(document.checkOut.numberOut.value);

而且有這樣的功能：

function validateTerrNumber(field){...

而且document.checkOut是undefined而非form元素（依賴於瀏覽器？？），最好使用document.getElementById('numberOut').value代替（fName和lName）。當然，您需要在HTML中添加這些id。

來源

2012-08-15 05:30:16 Teemu

感謝您的反饋意見;立即解決問題。我不敢相信我完全錯過了這一點。 – Mlagma 2012-08-15 05:35:34

我絕對更喜歡'document.getElementById（）'，但是'document.checkOut'在我的答案中包含的演示中工作正常。（如果你想使用'getElementById（）'你應該給元素ID ...） – nnnnnn 2012-08-15 05:41:40

Javascript驗證在提交時無法正常工作

回答

相關問題