使用输入表单标记中的onclick属性的JavaScript未捕获引用错误

Question

function submitToServer(formObject)
{           
        if(validateUserName(formObject["userName"]) && validatePassword(formObject["password"])) 
        {
            formObject.submit();
        }
}

html表单字段

 <form  method="POST" action="SignIntoPortal">
        <table>
            <tr>
                <td> User Name : </td> 
                <td>
                       <input type="text" id="userName" name="userName" onblur="validateUserName(this)">
                       <span id="userName_help" />
                </td>
            </tr>
            <tr>
                <td> Password : </td> 
                <td>
                       <input type="password" id="password" name="password" onblur="validatePassword(this)">
                       <span id="password_help" />
                </td>
            </tr>
            <br>
        </table>
        <input type="button" name="submitButton" id="submitButton" value="Submit" onclick="submitToServer(this.form);">
        </input>
    </form>

以上是我的代码，它验证数据并提交表单。但我一直在

未捕获的ReferenceError：未定义submitToServer

错误，我无法解决。可能是什么原因？但是，当我用不同的形式尝试它时，它使用不同的名称和字段。

编辑

工作的代码和这之间的区别是，前一个代码不使用表它工作顺利。范围是否随表格而变化？

你可以在这里找到代码CODE FIDDLE

你可以得到.html文件here

SignIn.html

<html>
    <head>
        <title>Sign into Shopping Zone</title>
        <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-8"> 
        <style>
            body
            {
                font: 14px verdana;
            }
            h1
            {
                font: arial-black;
                color: blue;
            }
        </style>

        <script type="javascript" language="text/javascript">
            function submitToServer(formObject)
            {           
                if(validateUserName(formObject["userName"]) && validatePassword(formObject["password"])) 
                {
                    formObject.submit();
                }
            }
            function validateUserName(inputField)
            {
                if(inputField.value.length == 0)
                {
                    document.getElementById("userName_help").innerHTML = "Please enter value";
                    return false;
                } 
                else
                {
                    document.getElementById("userName_help").innerHTML = "";    
                    return true;
                } 
            }
            function validatePassword(inputField)
            {
                if(inputField.value.length == 0)
                {
                    document.getElementById("password_help").innerHTML = "Please enter value";
                    return false;
                }
                else
                {
                    document.getElementById("password_help").innerHTML = "";
                    return true;
                }
            }
        </script>

    </head>

    <body>

        <h1><b><i>Shopping Zone</i></b></h1>
        <p> Kindly Provide Login info
        </p>
        <!-- SignIn Form Data for Passing to SignIntoPortal-->
        <form  method="POST" action="SignIntoPortal">
            <table>
                <tr>
                    <td> User Name : </td> <td><input type="text" id="userName" name="userName" onblur="validateUserName(this)"><span id="userName_help" /></td>
                </tr>
                <tr>
                    <td> Password : </td> <td><input type="password" id="password" name="password" onblur="validatePassword(this)"><span id="password_help" /></td>
                </tr>
                <br>
            </table>
            <input type="button" name="submitButton" id="submitButton" value="Submit" onclick="submitToServer(this.form)"></input>
        </form>
    </body>
</html>