当字段无效时 Sweetalert 弹出消息

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

你的情况不对，试试这个：

if (name && message && email)
{
   // Code
}

Answer 2

空字段不等于 space (" ")，它等于空字符串 ("")。因此，您需要检查字段是否等于空字符串，而不是带有 space:

的字段

if (name != "" && message != "" && email != "") {
  // code...
}

但是，如果您想要将其中没有文本（并且只有 spaces）的字段也视为无效，您可以将 .trim() 方法添加到 name、message 和 email 变量。通过使用 trim 您可以将输入转换为 " " 转换为 ""，然后将被视为无效输入：

if (name.trim() != "" && message.trim() != "" && email.trim() != "") {
  // code...
}

由于空字符串被视为 falsey（即 "" == false），因此您无需检查您输入的是否等于空字符串，而只需检查是否 x.trim() 评估为 true 像这样：

if (name.trim() && message.trim() && email.trim()) {
  // code...
}

Answer 3

我看不到触发按钮的位置

这一行，

<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();
});

第三

您可以使用表单的 on-submit 事件

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

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

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

或

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

当字段无效时 Sweetalert 弹出消息

Sweetalert PoP-up message when fields are field is not working

html

javascript

sweetalert