通过html表单循环

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;
            }

        }

    }

演示版

Answer 2

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

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

UPDATE （JavaScript中的其他逻辑问题）

查看JavaScript之后，您将遇到逻辑问题，即使某些字段“无效”，该问题也会导致表单提交：

else return true;

该行在for循环内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;
}