如果用戶名不可用，jQuery ajax將阻止表單提交

Question

我正在使用此腳本來檢查用戶名的可用性，它可以工作，但是即使用戶名不可用，也會提交表單。 我嘗試使用event.preventdefault，但是，我不知道如何正確使用它，如何防止提交表單？

<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>

這是表格

<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>

這是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

刪除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');
    });
});

 });