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验证在提交时无法正常工作

回答

相关问题