Question

我正在尝试验证html表单，如果提交时任何元素为空，则返回警报。当我测试这个脚本时，无论是否填写了任何字段，都会将from发送到服务器。任何帮助都将不胜感激。

<script type="text/javascript">
    /* <![CDATA [ */

        function validateForm()
        {
            for(var i=0; i < document.salesRecords.elements.length; i++)
            {
                if(document.salesRecords.elements[i].value == null || document.salesRecords.elements[i].value == "")
                {
                    alert("Error " + name + " must be given a value");
                    return false;
                }
                else return true;
            }
        }

    /* ]]> */   
    </script>

HTML

<form action ="some_action.php" name="salesRecords" method="post">
Client = <input type="text" name="client" value="" /> </br>
Date = <input type="text" name="date" value="" /> </br>
Value = <input type="text" name="amount" value="" /> </br>
<input type="submit" value="Submit" onclick="validateForm();"/>

Answer 1

试试这个：

HTML：

<input type="submit" value="Submit" onclick="return validateForm();"/>

的Javascript：

function validateForm()
    {
        for(var i=0; i < document.salesRecords.elements.length; i++)
        {
            if(document.salesRecords.elements[i].value == null ||
             document.salesRecords.elements[i].value == "")
            {
                 alert("Error " + document.salesRecords.elements[i].getAttribute("name") + " must be given a value");
                return false;
            }

        }

    }

Demo

Answer 2

在Submit按钮的onclick属性中，您必须使用return validateForm();实际使用返回值，而不只是调用方法：

<input type="submit" value="Submit" onclick="return validateForm();"/>

更新（javascript中的其他逻辑问题）

在查看您的javascript之后，您有一个逻辑问题，即使某些字段“无效”，也会导致表单提交：

else return true;

此行位于for循环内，并且在第一个表单字段正确验证后将return true。

修复方法是简单地删除该行并在循环结束后添加return true;：

function validateForm() {
    for(var i=0; i < document.salesRecords.elements.length; i++) {
        if(document.salesRecords.elements[i].value == null || document.salesRecords.elements[i].value == "") {
            alert("Error " + name + " must be given a value");
            return false;
        }
    }
    return true;
}

循环通过html表单

2 个答案: