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

Question

I had a question about Sweetalert a week ago. Then I got an answer which helped me, but unfortunately, it is still not working. I wanted a Sweetalert pop-up message (success) when the user hits the submit button, but only if the fields are filled. I do not know what the problem is. Currently, nothing happens when the user hits the button.

Here is my code:

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',
    )}
}

And the part of the 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

I can't see where the button was fired

On this line,

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

You have at least two options to fire the button

1st

You can change the line to this

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

2nd

You can add this to your javascript section

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

3rd

You can use the form's on-submit event

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

When this is done, modify your condition to

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

OR

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

Answer 2

An empty field isn't equal to a space (" "), it is equal to an empty string (""). So, you need to check if the fields equal an empty string, not a field with a space:

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

However, if you want to treat fields which have no text in them (and just spaces) as invalid as well, you can add the .trim() method to your name, message and email variables. By using trim you can turn inputs such as " " into "", which will then be treated as an invalid input:

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

As an empty string is considered falsey (ie "" == false) you don't need to check whether you're input equals an empty string and instead can just check if x.trim() evaluates to true like so:

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

Answer 3

your condition is not right, try doing this:

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