如何实现EJS表单提交按钮仅在数字输入总和≤1140时提交

我在EJS文件中创建了一个表单，包含4个数字输入框（记录不同场景的手机使用时长）和1个文本输入框（姓名）。需求是点击提交按钮时，校验所有数字输入框的数值总和是否≤1140：

• 若总和符合要求，正常提交表单
• 若总和超过1140，提示用户修改输入值，阻止表单提交

以下是我编写的EJS代码及尝试的脚本，但未能正确实现该功能：

<!DOCTYPE html>
<html lang="en">

<html>

<head>
    <title>MTU Phone Usage Monitor</title>
    <link rel="stylesheet" href="/stylesheets/styleHome.css"></link>
</head>

<body>
    <div class=" banner">
        <div class="navbar">
            <img src="\images\logo.png" class="logo">
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/phone/create">New Entry</a></li>
                <li><a href="/table">View Data</a></li>
                <li><a href="/help">Help</a></li>
            </ul>
        </div>

        <div class="content">
            <h2>Enter Phone usage data</h2>

            <form action="/phone/create" method="post">

                <p>
                    <label for="name">Enter your full name:</label>
                    <input type="String" id="name" name="name" placeholder="Name" required>
                </p>
                <br>
                <p>
                    <label for="timeEducation">How much time used for education:</label>
                    <input type="Number" id="timeEducation" name="timeEducation" placeholder="Time in minutes" min="0" max="1140" required>
                </p>
                <br>
                <p>
                    <label for="timeShopping">How much time used for shopping:</label>
                    <input type="Number" id="timeShopping" name="timeShopping" placeholder="time in minutes" min="0" max="1140" required>
                </p>
                <br>
                <p>
                    <label for="timeBrowsing">How much time used for browsing and searching:</label>
                    <input type="Number" id="timeBrowsing" name="timeBrowsing" placeholder="Time in minutes" min="0" max="1140" required>
                </p>
                <br>
                <p>
                    <label for="timeSocial">How much time used for social media:</label>
                    <input type="Number" id="timeSocial" name="timeSocial" placeholder="Time in minutes" min="0" max="1140" required>
                </p>
                <br>
                <!-- add date input whenever -->
                <button id="button" type="submit">submit</button>
                <!--make hidden unless values withn 1140 in total-->
                <script>
                    function findTotal() {
                        var arr = document.getElementById( 'timeEducation', 'timeShopping', 'timeBrowsing', 'timeSocial');
                        var total = 0;
                        let element = document.getElementById("button")
                        for (var i = 0; i < arr.length; i++) {
                            if (parseInt(arr[i].value))
                                total += parseInt(arr[i].value)
                        }
                        if (total <= 1140) {
                            //on click of button, submit
                        } else {
                            //on click of button, display the total of inputs combined must not exceed 1140
                        }
                    }
                </script>

            </form>
        </div>

</body>

</html>

<!DOCTYPE html>
<html lang="en">

<html>

<head>
    <title>MTU Phone Usage Monitor</title>
    <link rel="stylesheet" href="/stylesheets/styleHome.css"></link>
</head>

<body>
    <div class=" banner">
        <div class="navbar">
            <img src="\images\logo.png" class="logo">
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/phone/create">New Entry</a></li>
                <li><a href="/table">View Data</a></li>
                <li><a href="/help">Help</a></li>
            </ul>
        </div>

        <div class="content">
            <h2>Enter Phone usage data</h2>

            <form id="usageForm" action="/phone/create" method="post">

                <p>
                    <label for="name">Enter your full name:</label>
                    <input type="text" id="name" name="name" placeholder="Name" required>
                </p>
                <br>
                <p>
                    <label for="timeEducation">How much time used for education:</label>
                    <input type="Number" class="time-input" id="timeEducation" name="timeEducation" placeholder="Time in minutes" min="0" max="1140" required>
                </p>
                <br>
                <p>
                    <label for="timeShopping">How much time used for shopping:</label>
                    <input type="Number" class="time-input" id="timeShopping" name="timeShopping" placeholder="time in minutes" min="0" max="1140" required>
                </p>
                <br>
                <p>
                    <label for="timeBrowsing">How much time used for browsing and searching:</label>
                    <input type="Number" class="time-input" id="timeBrowsing" name="timeBrowsing" placeholder="Time in minutes" min="0" max="1140" required>
                </p>
                <br>
                <p>
                    <label for="timeSocial">How much time used for social media:</label>
                    <input type="Number" class="time-input" id="timeSocial" name="timeSocial" placeholder="Time in minutes" min="0" max="1140" required>
                </p>
                <br>
                <!-- 错误提示元素 -->
                <p id="errorTip" style="color: red; display: none;">总时长不能超过1140分钟，请修改输入值</p>
                <button type="submit">submit</button>
                <script>
                    const form = document.getElementById('usageForm');
                    const timeInputs = document.querySelectorAll('.time-input');
                    const errorTip = document.getElementById('errorTip');

                    form.addEventListener('submit', function(e) {
                        let total = 0;
                        timeInputs.forEach(input => {
                            // 处理空值或非数字输入，按0计算
                            const value = parseInt(input.value) || 0;
                            total += value;
                        });

                        if (total > 1140) {
                            // 阻止表单提交
                            e.preventDefault();
                            errorTip.style.display = 'block';
                        } else {
                            errorTip.style.display = 'none';
                        }
                    });
                </script>

            </form>
        </div>

</body>

</html>

• 修正元素获取逻辑：document.getElementById仅能获取单个元素，改用document.querySelectorAll通过共同类名.time-input批量获取所有时间输入框，更高效。
• 绑定表单提交事件：直接监听表单的submit事件，确保点击提交按钮时自动触发校验，替代原未绑定的无效函数。
• 完善数值处理：用parseInt(input.value) || 0处理空值或非数字输入，避免计算报错。
• 优化错误提示：添加页面内的错误提示元素，替代弹窗，用户体验更友好；符合条件时自动隐藏提示。
• 修正HTML规范问题：把姓名输入框的type="String"改为标准的type="text"。

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