HTML / JavaScript：如何检测空白提交表单？

Question

下面是一个请求用户反馈的简单表单。

使用HTML和/或JavaScript，如何在检测到整个表单或表单的一部分为空白时创建一个弹出的警告框？例如。每当用户点击提交空白/不完整表格时，提示框：“您忘记填写姓名/电子邮件/评论”。

非常感谢。

    <div>
        <form method="post" enctype="text/plain" action="MAILTO:name@example.com">
        Your Name<br>
        <input type="text" size="40" name="name">
        <br><br>
        Email Address<br>
        <input type="text" size="40" name="email">
        <br><br>
        Any Comments or Questions?<br>
        <textarea name="comments" rows="8" cols="40"></textarea>
        <br><br>
        <input type="submit" value="Send">&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="reset" value="Reset">
        <br><br>
        </form>
    </div>

Answer 1

您可以为此

使用HTML5 required属性

<div>
    <form method="post" enctype="text/plain" action="MAILTO:name@example.com">
    Your Name<br>
    <input type="text" size="40" name="name" required>
    <br><br>
    Email Address<br>
    <input type="text" size="40" name="email" required>
    <br><br>
    Any Comments or Questions?<br>
    <textarea name="comments" rows="8" cols="40"></textarea>
    <br><br>
    <input type="submit" value="Send">&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="reset" value="Reset">
    <br><br>
    </form>
</div>

Answer 2

扩展表单标记

<form onsubmit="return validate();" method="post" enctype="text/plain" action="MAILTO:name@example.com">

此处的基本信息：每当您尝试提交表单时，都会调用validate()方法。 validate()函数的布尔返回值决定表单是否为sumbmitted。

为方便起见，请将id属性添加到所有字段。例如：

<input type="text" size="40" name="email" id="email">

validate()方法

这是表单测试的核心。

<script type="text/javascript">
    function validate()
    {
        var messages = new Array();
        if (document.getElementById('email').value.length == 0)
        {
            messages.push('E-Mail missing');
        }
        if (document.getElementById('name').value.length == 0)
        {
            messages.push('Name missing');
        }
        if (0 == messages.length)
        {
            return true;
        }
        // Do something with the messages array
        return false;
    }
</script>

玩得开心。

Answer 3

如果您知道javascript它是小菜一碟。如果不知道，您可以使用this。