When the value of status is true then even the if statement is not alerting done

Question

As you can see at last I set the status to be true when sign up is done successfully but the following if statement is now working and I don't know why. I have searched it everywhere but can't find a solution that's why I have to post this question. Please somebody help me. Thanks in advance !!

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

Does this answer your question? [Boolean condition is always false when using \`status == true\`](https://stackoverflow.com/questions/62479819/boolean-condition-is-always-false-when-using-status-true) — Karan Singh, Jun 20 '20 at 20:13
Are you really sure the`status` gets set to true? Really no errors? Add a `console.log` or add `debugger` right before setting the status to verify. — Maarten Veerman, Jun 20 '20 at 21:41
See the working answer below. Do not forget to up-vote and accept as the answer — Always Helping, Jun 20 '20 at 23:49

score 0 · Accepted Answer · answered Jun 20 '20 at 23:03

Here is working code you. Just run snippet see it in action.

Reason your status is always false is that you are declaring it outside the click event. Once the you all input are validated the status = false does not know where to update to true.

Always i have added a .show() function to your error .html. Basically if all the input are good to go the errorMessage element will hide and if the user remove the a value from input again - The div is set to hide() hence why we need to show the error again on the same element.

Basically its not in the click event 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>

Hope this helps.

When the value of status is true then even the if statement is not alerting done

1 Answers1