Question

我正在做的是验证用户输入。这时，我只是验证名称，以确保名称长度至少为6个字符。我将添加更多验证，但我甚至无法显示错误。如果脚本在HTML页面上但我想在外部使用它，它确实有效，因为我需要添加很多。

当我在HTML页面上的标签之间有js时，它可以工作：如果输入的字符少于6个，它将显示CSS“txtNameError”隐藏的内容。

当我在一个extrernal .js文件上有js时，它不起作用：如果少于6个字符，它不会将其更改为可见。

然而，代码是完全相同的？

以下是“名称部分”的基本HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Registration Form</title>
    <link type="text/css" rel="stylesheet" href="week12.css" />
    <script type="text/javascript" src="validate.js"></script>
</head>
<body>

<div class="form">
  <table>
    <tr>
        <td><input type="text" name="txtName" id="txtName" placeholder="Name" /></td>
        <td><p class="error" id="txtNameError">Name must be at least 6 characters long.</p></td>
        <!--The p class "error" is set to hidden visibility using the CSS page. If they don't meet the requirements, then "txtNameError" becomes visible.-->
    </tr>
    <!--OTHER USER INPUT, THAT I'M NOT YET INCLUDING (just working on the name part now)-->
    <tr>
        <td><button onclick="validateForm();">Register</button></td>
    </tr>
  </table>
</div>

</body>
</html>

如果我的函数下面有这个标签，它可以工作：它使txtNameError可见。但是，当我将我的函数放在validate.js上时，它根本不起作用。

<script>
    function validateForm() {
        var name = document.getElementById('txtName').value;
        var nameLength = name.length;
        if (nameLength < 6) {
            document.getElementById("txtNameError").style.visibility = "visible";
        }
    }
</script>

当我在HTML页面中有它时，我包含标签，当它在自己的validate.js中时，我不包含脚本标签。

Answer 1

您在脚本中拼写错误的功能。

另外在你的html中删除;在onclick属性中。似乎已经为我清理了错误。

 function validateForm() {
        var name = document.getElementById('txtName').value;
        var nameLength = name.length;
        if (nameLength < 6) {
            document.getElementById("txtNameError").style.visibility = "visible";
        }
    }

和

<td><button onclick="validateForm();">Register</button></td>

应为<td><button onclick="validateForm()">Register</button></td>

此外，我使用jQuery重新编写了设置，以便更容易地检查html元素，但是如果你需要它们在javascript中，我可以考虑重新编写它，请查看我更新的jsfiddle：http://jsfiddle.net/dhershman/365r5tg5/1/ < / p>

Answer 2

我已经明白了！

我从HTML页面中提取的其他变量之一是在完全加载之前尝试从页面中提取。我删除它，它使用外部.js文件。

我将努力重新定位/重做那个变量，所以希望我不会有这个问题！

非常感谢大家的帮助！：）

使用外部JS显示隐藏信息

2 个答案: