如果用户名不可用，jQuery ajax将阻止表单提交

Question

i am using this script to check username availability, it works but the form is submitted even if the username is unavailable. i tried to use event.preventdefault but, i don't know to use it correctly how can i prevent the form to be submitted?

<script>
    function checkAvailability() {
        $("#loaderIcon").show();
        jQuery.ajax({
            url: "check_availability.php",
            data: 'username=' + $("#username").val(),
            type: "POST",
            success: function(data) {
                $("#user-availability-status").html(data);
                $("#loaderIcon").hide();
            },
            error: function() {}
        });
    }
</script>

here is the form

<form id="defaultForm" action="index1.php" method="post" class="registration-form">
    Username
    <br>
    <input type="text" name="username" onBlur="checkAvailability()" id="username">
    <br><span id="user-availability-status"></span> Password
    <br>
    <input type="text" name="email" id="email">
    <br>
    <button type="submit" name="sub">Submit</button>

here is check_availability.php

<?php
    require_once("connect.php");
    if(!empty($_POST["username"])) {
      $result = mysqli_query($con,"SELECT count(*) FROM users WHERE username='" . $_POST["username"] . "'");
      $row = mysqli_fetch_row($result);
      $user_count = $row[0];
      if($user_count>0) {
         echo "<span class='status-not-available'><p style='text-align:center'> Username Not Available</p></span>";
      }
    }
?>

Answer 1

Remove the function call in your HTML

$(document).ready(function(){

  $("#defaultForm").submit(function(e) {
    e.preventDefault();
  $("#loaderIcon").show();
    var self = this;
    $.ajax({
            url: "check_availability.php",
            data: 'username=' + $("#username").val(),
            type: "POST"                
    }).success(function(data) {
      $("#user-availability-status").html(data);
                $("#loaderIcon").hide();
        if (data!= "<span class='status-not-available'><p style='text-align:center'> Username Not Available</p></span>")  
          self.submit();
    }).error(function() {
        alert('error');
    });
});

 });