为何JavaScript的.submit()方法调用无法触发表单的onsubmit事件？

以下是相关代码：

<?php
    if (!empty($_POST)) {
        header('Content-Type: text/plain');
        print_r($_POST);
        exit;
    }
?>

<!DOCTYPE html>
<html>
<body>

    <script>            
            setTimeout(function ()
            {
                document.forms[0].submit();
            }, 2000);
    </script>

    <form action="modaldialog-form-submit.html" method="post" id="myForm" onsubmit="alert('Why am I not seeing this alert when the form is submitted by JavaScript?');" >
        <input type="text" name="myText" value="Some text..." /><br />
        <textarea name="myTextarea">A text area</textarea><br />
        
        <input type="radio" value="1" name="myRadio" checked />Radio1<br />
        <input type="radio" value="22" name="myRadio" />Radio2<br />
        <input type="radio" value="333" name="myRadio" />Radio3<br />
        
        <select name="mySelect">
            <option value="first">First</option>
            <option value="second">Second</option>
            <option value="third">Third</option>
        </select>
        <p />
        <input type="submit" />
    </form>
    
</body>
</html>

点击提交按钮时，表单的onsubmit事件会触发并弹出提示框；但通过JavaScript调用document.forms[0].submit()方法提交表单时，却无法触发该onsubmit事件，请问这是什么原因？

原因解析 #

这是浏览器的规范设计行为：

• 当通过用户交互（比如点击提交按钮、按下回车触发提交）发起表单提交时，浏览器会自动触发onsubmit事件，目的是给开发者提供表单验证、拦截提交的时机。
• 但通过JavaScript直接调用form.submit()方法时，浏览器会跳过onsubmit事件的触发。这个设计主要是为了避免循环提交的问题——如果onsubmit事件处理函数里又调用了form.submit()，就会陷入无限循环，跳过事件触发可以避免这种情况。

解决方法 #

如果需要在JS主动提交时也执行onsubmit里的逻辑，有两种常用方式：

1. 手动调用onsubmit函数
   修改定时器里的代码，先调用onsubmit方法，确认返回true后再提交：

   setTimeout(function () {
       // 手动触发onsubmit事件，若返回true则提交
       if (document.forms[0].onsubmit()) {
           document.forms[0].submit();
       }
   }, 2000);
   

   注意：如果onsubmit里没有返回值，默认会返回undefined，此时if判断会不通过，需要确保onsubmit返回true才允许提交。

2. 抽离独立的逻辑函数
   把onsubmit里的验证或提示逻辑抽成单独的函数，在用户交互和JS提交时都调用：

   <script>
   function handleFormSubmit() {
       alert('This will show now!');
       // 这里可以添加表单验证逻辑，返回true表示允许提交
       return true;
   }
   
   setTimeout(function () {
       if (handleFormSubmit()) {
           document.forms[0].submit();
       }
   }, 2000);
   </script>
   
   <form action="modaldialog-form-submit.html" method="post" id="myForm" onsubmit="return handleFormSubmit();" >
       <!-- 表单元素保持不变 -->
   </form>
   

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