在html表单中循环

looping through an html form

本文关键字：循环 表单 html      更新时间：2023-09-26

我正在尝试验证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();"/>

试试这个：

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

演示

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

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

UPDATE（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;
}
相关文章：