即使表单为空，Onclick 警报也能正常工作吗？在点击提交按钮后，警报显示 1st 然后它表明输入字段是必需的

Question

这是我的代码。现在这里发生的是当我只用 1 个输入填写特定表格时，数据被提交并且之后显示警报，但是如果我不填写表格中的任何内容而只是点击提交按钮，警报甚至会显示如果表格是空的，并且在警报之后，它显示请填写此字段..那么出了什么问题？尝试搜索此解决方案并尝试了很多方法但没有任何效果...:(

<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 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(){alert("You've been subscribed to our newsletter!");}</script>
        </form>
</div>

Answer 1

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

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

Answer 2

看来您应该在允许提交之前验证用户确实输入了电子邮件值。如果没有，则显示错误。如果他们这样做，允许提交并刷新页面，显示成功警报

有几种方法可以防止自动提交表单，其中之一是在 form 标记中放置一个 onsubmit 处理程序并让其 return 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>

表单将提交，页面将刷新，您的 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 警报也能正常工作吗？在点击提交按钮后，警报显示 1st 然后它表明输入字段是必需的

Onclick alert works even if the form is empty? and after clicking on submit button alert shows 1st then it shows that the input field is required

javascript

php

mysqli

onclick

form-submit