JavaScript 不会验证表单

标签 javascript forms validation

目前我有一个包含 3 个文本输入的表单。当按下“提交”按钮时,它会调用一个 javascript 函数来验证表单,然后提交表单。问题是表单仍在提交但没有有效输入。如果有人能告诉我为什么会发生这种情况,我将不胜感激。

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Goal Input</title>
    <link href="AgileGoals.css" rel="stylesheet">
    <script type="text/javascript">
        function addSubGoal(){
            var table = document.getElementById("goalInput");
            var row = table.insertRow(table.rows.length);
            row.insertCell(0).innerHTML = "Subgoal:";
            row.insertCell(1).innerHTML = "<input type='text' name='subgoal'>";
        }
        function submit(){
            var goodInput = true;
            var name = document.getElementById("goalName").value;
            var length = document.getElementById("goalLength").value;
            if(name==""){
                goodInput=false;
                document.getElementById("nameError").innerHTML = "<em>Must enter a name.</em>";
            }
            if(length==""){
                goodInput=false;
                document.getElementById("lengthError").innerHTML = "<em>Must enter a length</em>";
            }else if(isNaN(length)){
                 goodInput=false;
                 document.getElementById("lengthError").innerHTML = "<em>Must be a number</em>";
            }            
            else if(length%1!=0){
                goodInput=false;
                document.getElementById("lengthError").innerHTML = "<em>Must be an integer</em>";
            }
            if(goodInput){
                document.getElementById("goalFoarm").submit();
            }
        };
    </script>
</head>
<body>
<form id="goalForm" action="server" method="post">
    <table id="goalInput">
        <tr>
            <td>Goal Name:</td>
            <td><input type="text" name="goalName" id="goalName"></td>
            <td id="nameError"></td>
        </tr>
        <tr>
            <td>Goal Length(Months):</td>
            <td><input type="text" name="goalLength" id="goalLength"></td>
            <td id="lengthError"></td>
        </tr>
        <tr>
            <td>Subgoal:</td>
            <td><input type="text" name="subgoal"></td>
        </tr>
    </table>
    <input type="button" onclick="addSubGoal()" value="Add Subgoal">
    <input type="button" onclick="submit()" value="Submit">
</form>

</body>
</html>

最佳答案

我认为您只是错过了在验证函数中调用 PreventEvent 。

首先,将提交按钮的声明更改为:

<input type="button" onclick="return submit()" value="Submit">

Secount,将验证函数的签名修改为:

function submit(e){

第三,如果验证失败,只需执行此行:

e.preventDefault(); return false;

这将防止表单提交时出现错误。 希望对您有所帮助。

关于JavaScript 不会验证表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29374617/

相关文章:

c - 请解释一下这段C代码

c# - 插入新行时 DataGridView 单元格值不可用于验证

javascript - '如何在 vue 3 中访问设置内的数据属性?

php - 表单输入图像换行

javascript - 如何在不使用ajax提交表单的情况下将文本值发送到服务器

javascript - HTML5 验证 : JavaScript weirdness with willValidate

javascript - 从 Aptana 验证器中排除特定文件或文件夹

javascript - 提高 CSS 缩小元素的图像质量

javascript - 从字符串中获取多个字节的更简单方法?

javascript - RegEx用于JavaScript中的灵活时间验证