javascript - 当字段无效时 Sweetalert 弹出消息

Question

我有一个 question关于一周前的 Sweetalert。然后我得到了一个对我有帮助的答案，但不幸的是，它仍然无法正常工作。当用户点击提交按钮时，我想要一个 Sweetalert 弹出消息(成功)，但前提是字段已填满。我不知道是什么问题。目前，当用户点击按钮时没有任何反应。

这是我的代码:

function Sweetalert1(){
    var name = document.getElementById("name").value;
    var message = document.getElementById("message").value;
    var email = document.getElementById("email").value;

    if (name != " " && message != " " && email != " "){
        Swal.fire(
                'Köszönjük!',
                'Megkaptuk a leveledet és hamarosan válaszolunk!',
                'success',
    )}
}

HTML 部分:

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

Answer 1

我看不到按钮在哪里触发

在这条线上，

<button name="submit" type="submit" class="btn" id="sendMessageButton">Küldés</button>

你至少有两个选项来触发按钮

第一名

你可以把这行改成这样

<button name="submit" type="submit" class="btn" id="sendMessageButton" onclick="Sweetalert1()">Küldés</button>

第二名

您可以将其添加到您的 javascript 部分

$("#sendMessageButton").click(function(){
    Sweetalert1();
});

第三

您可以使用表单的提交事件

$("form").submit(function(){
    Sweetalert1();
});

完成后，将您的条件修改为

if (name !== "" && message !== "" && email !== "")

或

if (name.trim() && message.trim() && email.trim())