Question

我正在为一个大学项目做一个简单的网站，其中一个要求是我有javascript来验证表单字段输入。我已经说服了我认为是一个有效的解决方案（从W3C网站上取下），但它似乎根本无法运行？

HTML页面如下：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Rubber Toy Dept. Inc. Ltd.</title>
    <link href="css/layout.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="scripts/java/validation.js"></script>
</head>

<body>
    <div  id="wrapper">
        <div id="header">
            <h1 id="headlines">Rubber Toy Dept. Inc. Ltd. </h1>
        </div>

        <div id="content">
            <div id="content-main">
                <form action="mailto:gt70@hw.ac.uk" onsubmit="return validate_form(thisform)"  method="post">
                    <table width="858" border="0px">
                        <tr>
                            <td>
                                <input type="checkbox" name="cb1" value="1"></input>
                            </td>
                            <td>
                                Daniel
                            </td>
                            <td>
                                &pound;90
                            </td>
                            <td>
                                <a href="productpages/daniel.xhtml"><img src="pics/daniel_sml.jpg" width="75" height="75" alt="Daniel"></img></a>
                            </td>
                        </tr>
                              <tr>
                            <td>
                                <input type="checkbox" name="cb2" value="1"></input>
                            </td>
                            <td>
                                Graeme
                            </td>
                            <td>
                                &pound;80
                            </td>
                            <td>
                                <a href="productpages/graeme.xhtml"><img src="pics/graeme_sml.jpg" width="75" height="75" alt="Graeme"></img></a>
                            </td>
                          </tr>
                              <tr>
                            <td>
                                <input type="checkbox" name="cb3" value="1"></input>
                            </td>
                            <td>
                                Lewis
                            </td>
                            <td>
                                &pound;10
                            </td>
                            <td>
                                <a href="productpages/lewis.xhtml"><img src="pics/lewis_sml.jpg" width="75" height="75" alt="Lewis"></img></a>
                            </td>
                          </tr>
                              <tr>
                            <td>
                                <input type="checkbox" name="cb4" value="1"></input>
                            </td>
                            <td>
                                Conor
                            </td>
                            <td>
                                &pound;1 (bargain!)
                            </td>
                            <td>
                                <a href="productpages/conor.xhtml"><img src="pics/conor_sml.jpg" width="75" height="75" alt="Conor"></img></a>
                            </td>
                          </tr>
                        </table>

                    <table width="858" border="0px">
                        <tr>
                            <td>
                                Username
                            </td>
                            <td>
                                <input type="text" name="username" id="username"></input>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                E-mail Address
                            </td>
                            <td>
                                <input type="text" name="email" id="email"></input>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Address
                            </td>
                            <td>
                                <input type="text" name="address" id="address"></input>
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td>
                                <input type="submit" name="submit" value="submit"></input>
                            </td>
                        </tr>
                    </table>
                </form>
            </div>

            <div id="w3c">
                <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
            </div>

            <div id="footer">
                <i>Coded and Designed by G.A Tinsdale, D. Scott and L. Mclean</i>
                </div>
            </div>

            <div id="bottom">
        </div>
    </div>  
</body>

并且Javascript文件包含：

function validate_required(field,alerttxt)
        {
            with (field)
            {
                if (value==null||value=="")
                {
                    alert(alerttxt);
                    return false;
                }
                else
                {
                    return true;
                }
            }
        }

        function validate_form(thisform)
        {
            with (thisform)
            {
                if (validate_required(email,"Email must be filled out!")==false)
                {
                    email.focus();
                    return false;
                }

                if (validate_required(username,"Username must be filled out!")==false)
                {
                    username.focus();
                    return false;
                }

                if (validate_required(address,"Address must be filled out!")==false)
                {
                    address.focus();
                    return false;
                }
            }
        }

很抱歉，如果我错误地列出了代码......我似乎不明白该怎么做:(

感谢您给予的任何帮助

丹尼尔。

Answer 1

<强>更新

@Matthew Wilson正确指出验证文件有404错误：

<script type="text/javascript" src="script/java/validation.js">
       ----------------------------------------^

确保您指定了正确的路径并且文件存在。

问题在这里：

onsubmit="return validation.js:validate_form(thisform)"

应该是：

onsubmit="return validate_form(thisform)"

Answer 2

您是否已将脚本文件包含在页面中： <script type="text/javascript" src="validation.js"></script>。接下来从表单的onsubmit中删除validation.js: ...这是不需要的。如果它仍然不起作用，那么一些调试。在验证表单功能中粘贴警报（“表单已提交”），看它是否会触发。如果没有，你需要弄清楚原因，如果是的话，在功能树下面进一步发出警报，找出发生了什么。

Answer 3

查看您提供的URL，您的脚本标记全部错误

第7行

<script type="text/javascript" src="script/java/validation.js">

应该是

<script type="text/javascript" src="script/java/validation.js"></script>

第8行

<script>

应该是

<script type="text/javascript">

并删除第50行的额外脚本标记

</script>

Javascript表单字段验证不起作用？

3 个答案:

<强>更新