表单字段填写完整后Sweetalert成功弹窗不生效问题求助

我来帮你排查下代码里的几个关键问题，这就是为啥点击提交按钮没反应的原因：

1. 条件判断逻辑错误 #

你现在判断表单字段的条件是和单个空格字符串（" "）比较，但用户没填写字段时，输入框的值是空字符串（""），不是单个空格。比如用户没填name，document.getElementById("name").value得到的是""，而"" != " "是成立的，但如果用户只输入空格，反而会通过判断，这完全不符合你的需求。正确的应该是判断字段不为空且去除首尾空格后也不为空（避免用户只输入空格蒙混过关）。

2. 表单默认提交行为未阻止 #

你的按钮是type="submit"，点击后浏览器会默认提交表单，页面会刷新或者跳转到contact.php，就算弹窗代码执行了，也会因为页面刷新瞬间消失，根本看不到。所以必须阻止表单的默认提交行为。

3. 函数未绑定到提交事件 #

你的Sweetalert1函数没有和表单的提交事件绑定，点击按钮时根本没调用这个函数，自然不会有任何反应。

修正后的完整代码： #

JavaScript部分

// 监听表单的提交事件，替代单独的函数绑定
document.getElementById("contactForm").addEventListener("submit", function(e) {
    // 阻止表单默认提交行为，避免页面刷新
    e.preventDefault();
    
    var name = document.getElementById("name").value.trim(); // 去除首尾空格
    var message = document.getElementById("message").value.trim();
    var email = document.getElementById("email").value.trim();
    
    // 判断所有字段都不为空
    if (name !== "" && message !== "" && email !== "") {
        Swal.fire(
            'Köszönjük!',
            'Megkaptuk a leveledet és hamarosan válaszolunk!',
            'success'
        );
        // 如果需要把表单数据提交到contact.php，这里可以加AJAX代码（比如fetch）
        // 这样不用刷新页面就能完成数据提交
    }
});

HTML部分（无需大幅修改，确保ID正确即可）

<form role="form" id="contactForm" action="contact.php" method="post">
    <div class="control-group">
        <div class="form-group floating-label-form-group controls mb-0 pb-2">
            <label>Név</label>
            <input class="form-control" id="name" name="name" type="text" placeholder="Név" required="required" data-validation-required-message="Kérlek add meg a neved!">
            <p class="help-block text-danger"></p>
        </div>
    </div>
    <div class="control-group">
        <div class="form-group floating-label-form-group controls mb-0 pb-2">
            <label>Email Cím</label>
            <input class="form-control" id="email" type="email" name="email" placeholder="Email" required="required" data-validation-required-message="Kérlek add meg az Email címed!">
            <p class="help-block text-danger"></p>
        </div>
    </div>
    <div class="control-group">
        <div class="form-group floating-label-form-group controls mb-0 pb-2">
            <label>Üzenet</label>
            <textarea class="form-control" id="message" rows="5" placeholder="Üzenet" name="message" required data-validation-required-message="Kérlek írd be az üzeneted!"></textarea>
            <p class="help-block text-danger"></p>
        </div>
    </div>
    <div id="success"></div>
    <div class="form-group">
        <button name="submit" type="submit" class="btn" id="sendMessageButton">Küldés</button>
    </div>
</form>

额外提醒： #

• 别忘了确认你已经正确引入了Sweetalert2的JS和CSS文件，否则Swal.fire也会无法执行。
• 如果需要提交表单数据到后端，建议用AJAX（比如fetch API）实现无刷新提交，这样弹窗和数据提交能同时完成，用户体验更好。

内容的提问来源于stack exchange，提问作者g.mark11