如果用户名不可用，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'); 
    }); 
}); 

});