Sweetalert PoP-сообщение, когда поля не заполнены - PullRequest
Новая
       7

Sweetalert PoP-сообщение, когда поля не заполнены

1 голос
/ 29 июня 2019

У меня был вопрос о 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>

Ответы [ 3 ]

1 голос
/ 29 июня 2019

Я не вижу, где была нажата кнопка

В этой строке 

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

У вас есть по крайней мере две опции для запуска кнопки

1-й

Вы можете изменить строку на эту 

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

2-й

Вы можете добавить это в свой раздел JavaScript 

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

3-й

Вы можете использовать событие отправки формы 

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

Когда это будет сделано, измените ваше условие на 

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

ИЛИ 

if (name.trim() && message.trim() && email.trim())
0 голосов
/ 29 июня 2019

Пустое поле не равно пробелу (" "), оно равно пустой строке (""). Итак, вам нужно проверить, совпадают ли поля с пустой строкой, а не с пробелом: 

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

Однако, если вы хотите, чтобы поля, в которых нет текста (и только пробелы), также считались недействительными, вы можете добавить метод .trim() к своим переменным name, message и email. С помощью обрезки вы можете повернуть входы, такие как " " в "", который затем будет считаться неверным вводом: 

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

Поскольку пустая строка считается falsey (то есть "" == false), вам не нужно проверять, равняется ли ваш ввод пустой строке, и вместо этого можно просто проверить, оценивается ли x.trim() как true, как : 

if (name.trim() && message.trim() && email.trim()) {
  // code...
}
0 голосов
/ 29 июня 2019

ваше состояние не в порядке, попробуйте сделать это: 

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