Question

目前，我有一个包含3个文本输入的表单。当＆＃34;提交＆＃34;按下按钮它会调用一个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>

Answer 1

我想你只是缺少在验证函数中调用preventEvent。

首先，将提交按钮的声明更改为：

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

Secount，将验证功能的签名修改为：

function submit(e){

第三，如果验证失败，只需执行以下行：

e.preventDefault(); return false;

这样可以防止提交表单时出错。希望它有所帮助。

Answer 2

此处为jQuery解决方案。

$('#goalForm').submit(function(event){
    // your validation here, if ok, submit manually.
    event.preventDefault(); // This line prevent the submit action.
});

Answer 3

有时，浏览器不喜欢像submit这样的函数名，因为它是保留的关键字/函数。所以，请尝试以下方法。

function submitForm() {
    var goodInput = true;
    //Store references to DOM elements.
    var errorName = document.getElementById("nameError");
    var errorLength = document.getElementById("lengthError");
    var name = document.getElementById("goalName").value;
    var length = document.getElementById("goalLength").value;
    
    //Empty the previous error messages when valid options are entered.
    errorName.innerHTML = "";
    errorLength.innerHTML = ""
    
    if(name == "") {
        errorName.innerHTML = "<em>Must enter a name.</em>";
        goodInput = false;
    }
    //Check if it's a number and not empty.
    if(length.match(/^\d+$/i) === null){
        errorLength.innerHTML = "<em>Must enter a length that's a number!</em>";
        goodInput = false;
    }
    if(!goodInput) {
        return false;
    } else {
        alert ("All clear!");
    }
}

<form id="goalForm" 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="submitForm()" value="Submit">
</form>

Javascript不会验证表单

3 个答案: