-1

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

使用 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>
4

3 回答 3

3

您可以为此使用 HTML5required属性

<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>
于 2013-06-23T20:40:08.677 回答
1

展开您的表单标签

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

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

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>

玩得开心。

于 2013-06-23T20:47:43.277 回答
0

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

于 2013-06-23T20:39:31.343 回答