Execute a function according to ajax response

Question

I have 2 functions which are being called onBlur to validate if username or email registered before completing the registration process.

these are the 2 functions

function checkname() {
    jQuery.ajax({
        url: "includes/check_signup.php",
        data:'username='+$("#name").val(),
        type: "POST",
        success:function(data){
            $("#error").html(data);
        },
        error:function (){}
    });
}

function checkemail()
{
    jQuery.ajax({
        url: "includes/check_signup.php",
        data:'email='+$("#email").val(),
        type: "POST",
        success:function(data){
            $("#error").html(data);
        },
        error:function (){}
    });
}

I have a 3rd function that gets executed on button submit to send the user data to the database. Now, how can I stop that function from being executed if any of the above functions returned success that "username/email is already registered?"

This is the 3rd function

 $('#btn-signup').click(function(){
    $.post( 
        $('#register-form').attr('action'),
        $('#register-form :input').serializeArray(),
        function(result){
            $('#result').html(result);
        }
    );
});

Answer 1

This is the whole code:

Make sure to replace code after success ajax request return.

I suppose 0 result as it's available, otherwise it's not available

var isNameAvailable = false;
var isEmailAvailable = false;

function checkname() {
  jQuery.ajax({
    url: "includes/check_signup.php",
    data: 'username=' + $("#name").val(),
    type: "POST",
    success: function(data) {
      $("#error").html(data);

      if (parseInt(data) == 0) {
        isNameAvailable = true;
      } else {
        isNameAvailable = false;
      }
    },
    error: function() {
      console.log("connection error");
      // for test only
      console.log("Demoooo");
      isNameAvailable = true;
    }
  });
}

function checkemail() {
  jQuery.ajax({
    url: "includes/check_signup.php",
    data: 'email=' + $("#email").val(),
    type: "POST",
    success: function(data) {
      $("#error").html(data);

      if (parseInt(data) == 0) {
        isEmailAvailable = true;
      } else {
        isEmailAvailable = false;
      }
    },
    error: function() {
      console.log("connection error");
      // for test only
      console.log("Demoooo");
      isEmailAvailable = true;
    }
  });
}

$('#btn-signup').click(function(event) {
  event.preventDefault();
  if (!isNameAvailable || !isEmailAvailable) {
    console.log("check username and email");
    return;
  }
  console.log("Success ...");
  $.post(
    $('#register-form').attr('action'),
    $('#register-form :input').serializeArray(),
    function(result) {
      $('#result').html(result);
    }
  );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  username: <input type="text" name="name" id="name" onblur="checkname()" />
   email: <input type="text" name="email" id="email" onblur="checkemail()" />
  <br />
  <br />
  <input type="submit" name="submit" id="btn-signup" value="Submit" />
</form>

Answer 2

You make the 2 field checks either on 'onBlur' of the field or before submit and only then add user.

$("#name").on("blur",checkname); 

In checkName success, you can additionally set flag nameValid = true.

You can do that in this way

function checkname() {
    jQuery.ajax({
        url: "includes/check_signup.php",
        data:'username='+$("#name").val(),
        type: "POST",
        success:function(data){
            nameValid = false;
        },
        error:function (){
            nameValid = true;
        }
    });
}

Similarly, you can give

$("#email").on("blur",checkemail); 

to set emailValid flag. on blur is normally used as it is called when user has clicked/entered value and exits the field.

On submit button, you could check for the 2 flags and call only if both flags are true.

$('#btn-signup').click(function() {
   if (nameValid && emailValid) { 
      if(!$(".result").text()) {
        $.post( 
            // etc
        );
     } else {
        $("#error").focus();
    }
   }
});

You could also do the 2 checks on submit together by callback chaining, calling the 2nd check in the success of first check and calling submit in the success of 2nd check. But this one takes longer wait, too much nested callback (a.k.a callback hell) and it is best practise to give inline user feedback immediately on user entry.

Answer 3

Use a semaphore to control the traffic you desire, imagine you have a DOM object with class result_email and result_name, and originally both contain .text() == "blocked"

$('#btn-signup').click(function() {
    if(!$(".result_email").text() && !$(".result_name").text()) {
        $.post(
            // etc
        );
    } else {
        $("#error").focus();
    }
});

And if either call succeeds, meaning username or e-mail is existing already, we turn the semaphore on to block registration button click event, but if the check method called again, and it failed, thus name or email is OK for registration, we remove the block from semaphore;

function checkemail() {
    jQuery.ajax({
        url: "includes/check_signup.php",
        data:'email='+$("#email").val(),
        type: "POST",
        success:function(data){
            $(".result_email").text("blocked")
            $("#error").html(data);
        },
        error:function (){
            $(".result_email").text("")
        }
    });
}

function checkname() {
    jQuery.ajax({
        url: "includes/check_signup.php",
        data:'username='+$("#name").val(),
        type: "POST",
        success:function(data){
            $(".result_name").text("blocked")
            $("#error").html(data);
        },
        error:function (){
            $(".result_name").text("")
        }
    });
}

You can use a global variable in JS also, but better to use a DOM element IMO.