表单为空提交时先触发Onclick alert再提示必填项的问题如何解决？

故障原因 #

• 核心触发逻辑顺序错误：你把submit_email()函数绑定在了提交按钮的onclick事件上，点击按钮时会优先执行onclick绑定的JS代码，早于浏览器内置的HTML5必填项校验逻辑，所以不管表单有没有填内容，都会先弹出alert，之后浏览器才会执行表单提交前的校验，触发必填提示。
• 额外逻辑缺陷：当前即使邮箱校验通过，只要点击提交就会弹出订阅成功的提示，完全没有和后端PHP的插入结果关联，哪怕数据库插入失败也会给用户错误的成功提示。

修复方案 #

1. 移除按钮上的onclick绑定，改为监听表单的submit事件，只有HTML5校验通过之后才执行提示逻辑
2. 建议后端执行插入操作后返回状态标记，前端根据实际插入结果展示提示，避免误导用户

修正后的代码示例 #

<div class="newsletter">
    <p>Sign Up for the <strong>NEWSLETTER</strong></p>
    <!-- 给表单加id方便绑定事件 -->
    <form method="post" id="newsletterForm">
        <?php
            $submitted = false;
            if(isset($_POST['subscribe']))
            {
                $e_mail = $_POST['e_mail'];
                $conn = new mysqli('localhost','root','','purrfect_whiskers');
                if($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);
                    $submitted = $stmt->execute();
                    $stmt->close();
                    $conn->close();
                }
            }
        ?>
        <input class="input" type="email" name="e_mail" style="text-transform:lowercase" placeholder="Enter Your Email" autocomplete="off" required="required">
        <button class="subscribe" type="submit" name="subscribe"><i class="fa fa-envelope"></i> Subscribe</button>
        <script type="text/javascript">
            const form = document.getElementById('newsletterForm');
            form.addEventListener('submit', function(e) {
                // 只有表单校验通过、且后端插入数据成功才弹提示
                <?php if($submitted): ?>
                alert("You've been subscribed to our newsletter!");
                <?php endif; ?>
            });
        </script>
    </form>
</div>

内容的提问来源于stack exchange，提问作者Vaishnavi Sawant