Javascript 即使表单为空，Onclick警报也可以工作？单击“提交”按钮后，警报显示为1，然后显示输入字段为必填字段

这是我的密码。现在发生的事情是，当我用1个输入填写特定表单时，数据会被提交，之后会显示警报，但如果我没有在表单中填写任何内容，只需单击“提交”按钮，即使表单为空，也会显示警报，警报后会显示请填写此字段。。那么出了什么问题？尝试寻找这个解决方案，尝试了很多东西，但都没有效果…：(

注册时事通讯

订阅
函数submit_email（）{alert（“您已订阅我们的新闻稿！”）；}

无论发生什么情况，警报代码都会执行。因此，只有当表单中没有任何内容时，才必须显示警报代码。 为此，我在您的输入中添加了一个id，并检查您的表单是否为空。 最好是向regex检查它是否确实是一个电子邮件地址，但这里的代码只是为了验证它是否不是空的 代码如下：

<div class="newsletter">
    <p>Sign Up for the <strong>NEWSLETTER</strong></p>
    <form method="post">
        <?php
                    if(isset($_POST['subscribe']))
                    {
                       $e_mail = $_POST['e_mail'];

                       $conn = new mysqli('localhost','root','','purrfect_whiskers');
                       if($conn->connect_error)
        {
        echo "$conn->connect_error";
        die("Connection Failed : ". $conn->connect_error);
        }
        else
        {
        $stmt = $conn->prepare("insert into newsletter(e_mail) values(?)");
        $stmt->bind_param("s", $e_mail);
        $stmt->execute();

        $stmt->close();
        $conn->close();
        }
        }
        ?>
        <input id="id_input" class="input" type="email" name="e_mail" text-transform="lowercase"
               placeholder="Enter Your Email"
               autocomplete="off" required="required">
        <button class="subscribe" onclick="submit_email()" type="submit" name="subscribe"><i class="fa fa-envelope"></i>
            Subscribe
        </button>
        <script type="text/javascript">function submit_email() {
            if (document.getElementById("id_input").value !== "") {
                alert("You've been subscribed to our newsletter!");
            }
        }</script>
    </form>
</div>

注册时事通讯

订阅
函数submit_email（）{
if（document.getElementById（“id_输入”）.value！=“”）{
提醒（“您已订阅我们的时事通讯！”）；
}
}

看起来您应该验证用户在允许提交之前是否为电子邮件输入了值。如果没有，则显示错误。如果有，则允许提交，并在页面刷新时显示成功警报

有两种方法可以防止自动提交表单，其中之一是将

onsubmit

处理程序放在

表单

标记中，并使其返回

true

（允许提交或

false

防止提交。您可以在该处理程序中执行所有验证操作：

<form method="POST" onsubmit="return submit_email()">

然后在函数中，检查值是否存在，然后再继续：

<script type="text/javascript">
  function submit_email(){
    let email_input = document.querySelector("input[name='e_mail']");
    if (email_input.value=="") {
      alert("Please type in your email first");
      return false; // this prevents the form from submitting
    }
    return true; // this allows the submission
  }
</script>

函数submit_email（）{
让email\u input=document.querySelector（“input[name='e\u mail']”）；
如果（email_input.value==“”）{
提醒（“请先键入电子邮件”）；
return false；//这将阻止表单提交
}
return true；//这允许提交
}

表单将提交，页面将刷新，您的PHP代码将完成它的工作。最后，只需硬编码您的警报，如下所示：

<?php
if(isset($_POST['subscribe'])){
 // do all your code as you are, then end with:
?>

<script>
    alert("You've been subscribed to our newsletter!");
</script>

<?php                    
}
?>

提醒（“您已订阅我们的时事通讯！”）；

我不会使用

onclick

事件处理程序来显示该警报。只要有人单击按钮，

onclick

就会触发。那是在表单提交到服务器之前，所以在显示该警报时，用户还没有实际订阅。我会在页面中添加一条消息，感谢他们如果（isset（$\u POST['subscribe']）分支。并使用else显示表单，这样他们就不能再次输入表单。或者重定向到另一个“谢谢”页面，这样即使刷新页面也不会再次提交您的数据。是的，我删除了onclick函数并添加了onsubmit，而不是…如果您使用内置的

required

validation约束，您根本不需要该函数。@lvar-很好。虽然这里需要对表单事件的提交周期进行演练-在允许提交之前，可能需要检查该电子邮件地址是否已经存在。。。

<?php
if(isset($_POST['subscribe'])){
 // do all your code as you are, then end with:
?>

<script>
    alert("You've been subscribed to our newsletter!");
</script>

<?php                    
}
?>