Why is my function returning undefined?

Question

The function validate() is returning undefined, when I expected it to return false or true. Why is this happening? Now I'm just typing this because stackoverflow won't let me post this question, since it is mostly code.

function validate() {
  var isFormValid = false;

  var emailValid = false;
  var inputValid = false;
  var passValid = true;

  //VALIDATE EMAIL
  var emailInput = $("input[type='email']");
  $.get("/checkEmail", {
    email: emailInput.val()
  }, function(data) {
    if (data.userExists) {
      emailInput.removeClass("valid");
      emailInput.addClass("invalid");
      return false;
    } else {
      emailValid = true;
      emailInput.removeClass("invalid");
      emailInput.addClass("valid");
    }

    if (passValid && emailValid && inputValid) {
      return true;
    }
  });

  //ADD VALID CLASS TO INPUTS
  var inputs = $("input,textarea");
  inputs.each(function() {
    if ($(this).val() != "") {
      inputValid = true;
      $(this).removeClass("invalid");
      $(this).addClass("valid");
    } else {
      $(this).removeClass("valid");
      $(this).addClass("invalid");
      return false;
    }
    if (passValid && emailValid && inputValid) {
      return true;
    }
  });

  //VADIDATE PASSWORD
  var pass = $("input[name='password']");
  var repass = $("input[name='repassword']");
  if (pass.val() != repass.val()) {
    passValid = false;
    repass.removeClass("valid");
    repass.addClass("invalid");
    return false;
  }

}

$(document).ready(function() {
  $("#registerForm").submit(function(event) {
    console.log(validate());
    if (!validate()) {
      event.preventDefault();
    }

  });
});

If no condition is matched, nothing is returned so `undefined` is explicitly returned. Also, note that you cannot return from async call. — Tushar, Nov 10 '16 at 03:37
https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call?rq=1 — Tushar, Nov 10 '16 at 03:46
@leodaher What is purpose of `javascript` within `validate` following `$.get()` call? — guest271314, Nov 10 '16 at 03:51
If you want to do AJAX validation, maybe use the jquery-validate plugin and use its `remote:` method. — Barmar, Nov 10 '16 at 03:59
Did you AJAX return something useful?try to open up your dev tool and select the `Network` tab and debug it. — Felix Fong, Nov 10 '16 at 04:01

guest271314 · Answer 1 · 2016-11-10T04:07:54.733

Return $.get() from validate; return true or false at .then() chained to $.get() call; use .then(), .fail() at .submit() call to process promise value returned from .then() at validate

function validate() {
  var isFormValid = false;

  var emailValid = false;
  var inputValid = false;
  var passValid = true;

  //VALIDATE EMAIL
  var emailInput = $("input[type='email']");
  // note `return`
  return $.get("/checkEmail", {
    email: emailInput.val()
  })
  .then(function(data) {
    // perform all necessary logic, return `true` or `false` within `.then()`
    if (data.userExists) {
      emailInput.removeClass("valid");
      emailInput.addClass("invalid");
      return false;
    } else {
      emailValid = true;
      emailInput.removeClass("invalid");
      emailInput.addClass("valid");
    }

    if (passValid && emailValid && inputValid) {
      return true;
    }
    /*
      // if below logic is necessary, perform logic within `.then()`

      //ADD VALID CLASS TO INPUTS
      var inputs = $("input,textarea");
      inputs.each(function() {
        if ($(this).val() != "") {
          inputValid = true;
          $(this).removeClass("invalid");
          $(this).addClass("valid");
        } else {
            $(this).removeClass("valid");
            $(this).addClass("invalid");
            return false;
        }
        if (passValid && emailValid && inputValid) {
          return true;
        }
     });

     //VADIDATE PASSWORD
     var pass = $("input[name='password']");
     var repass = $("input[name='repassword']");
     if (pass.val() != repass.val()) {
       passValid = false;
       repass.removeClass("valid");
       repass.addClass("invalid");
       return false;
     }
    */
  });

}

$(document).ready(function() {
  $("#registerForm").submit(function(event) {
    event.preventDefault();
    var elem = event.currentTarget;
    validate()
    .then(function(bool) {
      // if `bool` is `true` call `.submit()`
      if (bool) {
        elem.submit()
      }
    })
    // handle error
    .fail(function(jqxhr, textStatus, errorThrown) {
       console.log(errorThrown)
    })
  });
});

Why is my function returning undefined?

1 Answers1

Linked