Значение из поля ввода не отображается в alert ()

Question

У меня есть эта форма, как показано ниже. Я думаю, что я получил значение из поля ввода текста правильно. Но когда я alert() это, это ничего не показывает. (Даже не ноль)

Вот форма:

var firstName = document.getElementById('firstName').value;
          var lastName = document.getElementById('lastName').value;
          var email = document.getElementById('email').value;



          $("#validationAlert").hide();
          $("#btn-sign-up").click(function showAlert() {
              if (firstName == "") {
                  $("#firstName").focus();

                  alert(firstName); //this shows nothing even when I type something

                  $("#validationAlert").fadeTo(2000, 500).slideUp(500, function() {
                      $("#validationAlert").slideUp(1500);
                  });
                  return false;

              } else if (lastName == "") {
                  $("#lastName").focus();
                  alert("2");
                  $("#validationAlert").fadeTo(2000, 500).slideUp(500, function() {
                      $("#validationAlert").slideUp(1500);
                  });
                  return false;
              } else if (email == "") {
                  document.getElementById('email').focus();
                  $("#validationAlert").fadeTo(2000, 500).slideUp(500, function() {
                      $("#validationAlert").slideUp(1500);
                  });
                  return false;
              }
              return true;

          });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form method="POST" action="Login" onsubmit="return(showAlert());">
    <div class="form-group md-form">
        <!--<input type="email" class="form-control" id="email" value="" placeholder="Enter email address">-->
        <i class="fa fa-pencil prefix grey-text"></i>
        <input type="text" id="firstName" class="form-control">
        <label for="defaultForm-email">First Name</label>
    </div>

    <div class="form-group md-form">
        <!--<input type="email" class="form-control" id="email" value="" placeholder="Enter email address">-->
        <i class="fa fa-pencil prefix grey-text"></i>
        <input type="text" id="lastName" name="lastname" class="form-control">
        <label for="defaultForm-email">Last Name</label>
    </div>

    <div class="form-group md-form">
        <!--<input type="email" class="form-control" id="email" value="" placeholder="Enter email address">-->
        <i class="fa fa-envelope prefix grey-text"></i>
        <input type="email" id="email" name="email" class="form-control">
        <label for="defaultForm-email">Email Address</label>
    </div>

    <div class="text-center">
        <button type="reset" class="btn btn-amber btn-sm"><strong>Reset</strong></button>
        <!--<button type="submit" id="btn-sign-in" class="btn btn-green btn-sm"><strong>Sign in</strong></button>-->
        <button type="submit" id="btn-sign-up" class="btn btn-green btn-sm"><strong>Sign Up</strong></button>
    </div>
</form>

Может кто-нибудь сказать мне, где я ошибся ???

Answer 1

Наконец-то я нашел свою ошибку. Значения, которые я ввел / нет, должны проверяться после нажатия кнопки (не раньше). Так что script должно быть таким.

    <script>
            $("#validationAlert").hide();
            $("#btn-sign-up").click(function showAlert() {
                var firstName = document.getElementById('firstName').value;
                var lastName = document.getElementById('lastName').value;
                var email = document.getElementById('email').value;
                var userName = document.getElementById('username').value;
                var password = document.getElementById('password').value;
                var repeatPassword = document.getElementById('repeatpassword').value;
                var securityQuestion = document.getElementById('securityQuestion').value;
                var answer = document.getElementById('answer').value;
                if (firstName == "") {
//                        alert("URL is mandatory!");
                    $("#firstName").focus();
                    alert(firstName);
                    $("#validationAlert").fadeTo(2000, 500).slideUp(500, function () {
                        $("#validationAlert").slideUp(1500);
                    });
                    return false;

                } else if (lastName == "") {
                    $("#lastName").focus();
                    alert("2");
                    $("#validationAlert").fadeTo(2000, 500).slideUp(500, function () {
                        $("#validationAlert").slideUp(1500);
                    });
                    return false;
                } else if (email == "") {
                    document.getElementById('email').focus();
                    $("#validationAlert").fadeTo(2000, 500).slideUp(500, function () {
                        $("#validationAlert").slideUp(1500);
                    });
                    return false;
                } else if (userName == "") {
                    document.getElementById('username').focus();
                    $("#validationAlert").fadeTo(2000, 500).slideUp(500, function () {
                        $("#validationAlert").slideUp(1500);
                    });
                    return false;
                } else if (password == "") {
                    document.getElementById('password').focus();
                    $("#validationAlert").fadeTo(2000, 500).slideUp(500, function () {
                        $("#validationAlert").slideUp(1500);
                    });
                    return false;
                } else if (repeatPassword == "") {
                    document.getElementById('repeatpassword').focus();
                    $("#validationAlert").fadeTo(2000, 500).slideUp(500, function () {
                        $("#validationAlert").slideUp(1500);
                    });
                    return false;
                } else if (securityQuestion == "-1") {
                    document.getElementById('securityQuestion').focus();
                    $("#validationAlert").fadeTo(2000, 500).slideUp(500, function () {
                        $("#validationAlert").slideUp(1500);
                    });
                    return false;
                } else if (answer == "") {
                    document.getElementById('answer').focus();
                    $("#validationAlert").fadeTo(2000, 500).slideUp(500, function () {
                        $("#validationAlert").slideUp(1500);
                    });
                    return false;
                }
                return true;


            });

   </script>

Answer 2

Ваше условие говорит, что если ваше имя, фамилия и электронные письма пусты, только он выполнит код предупреждения.

Возможно, вам нужно проверить свое состояние другим способом,

if (firstName != "") { 

и т.д.