Когда значение status истинно, тогда даже оператор if не предупреждает

Question

Как вы теперь можете видеть, я установил статус true, когда регистрация прошла успешно, но теперь работает следующий оператор if, и я не знаю почему. Я искал его повсюду, но не могу найти решение, поэтому я должен опубликовать этот вопрос. Пожалуйста, помогите мне. Заранее спасибо !!

var status = false;

function isEmail(email) {
  var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  return regex.test(email);
}

$("#btn").click(function () {
  var error = "";
  var missing = "";
  var regex1 = /Email/;
  var regex2 = /Number/;

  if ($("#email").val() == "") {
    missing += "<br> Email";
  }

  if ($("#number").val() == "") {
    missing += "<br> Phone Number";
  }

  if ($("#password").val() == "") {
    missing += "<br> Password";
  }

  if ($("#passwordConfirm").val() == "") {
    missing += "<br> Confirm Password";
  }

  if (missing != "") {
    error += "Following field(s) are missing:" + missing;
  }

  if (isEmail($("#email").val()) == false && missing.match(regex1) == null) {
    error += "<p> Email address is not valid </p>";
  }

  if (
    $.isNumeric($("#number").val()) == false &&
    missing.match(regex2) == null
  ) {
    error += "<p> Phone Number is not valid </p>";
  }

  if ($("#password").val() != $("#passwordConfirm").val()) {
    error += "<p> Passwords are not matching </p>";
  }

  if (error != "") {
    $("#errorMessage").html(error);
  } else {
    $("#successMessage").show();
    $("#errorMessage").hide();
    status = true;
  }

  if (status === true) {
    alert("done");
  }
});

Answer 1

Вот вам рабочий код. Просто запустите сниппет и посмотрите, как он работает.

Причина, по которой ваш status всегда false, заключается в том, что вы объявляете его вне события щелчка. После того, как вы все введенные данные проверены, status = false не знает, где обновить до true.

Я всегда добавлял функцию .show() к вашей ошибке .html. В основном, если весь ввод хорош для go, элемент errorMessage будет скрыт, и если пользователь снова удалит значение a из ввода - для div установлено значение hide(), поэтому нам нужно снова показать ошибку на том же element.

В основном его нет в событии click scope

$("#btn").on('click', function() {
  var status = false;
  var error = "";
  var missing = "";

  if (!$("#email").val()) {
    missing += "<br> Email";
  }

  if ($("#number").val() == "") {
    missing += "<br> Phone Number";
  }

  if (missing != "") {
    error += "Following field(s) are missing:" + missing;
  }

  if (error != '') {
    $("#errorMessage").html(error).show();
  } else {
    $("#errorMessage").hide();
    status = true;
  }

  if (status == true) {
    alert("done");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" id="email" />

<input type="text" id="number" />

<button id="btn">Click Me</button>

<div id="errorMessage"></div>

Надеюсь, это поможет.