所需的功能无法使用ajax表单提交

Question

我正在使用ajax将表单数据提交到后端，并且工作正常。

<form  method="post" enctype="multipart/form-data">
  <input type="text"  class="first_name" name="first_name" id="first_name" placeholder="First name" required />
  <select class="type" name="type" id="type" required>
    <option value="A">A</option>
    <option value="B">B</option>
  </select>                                    
  <input type="file" class="file-upload uploadvisa" name="file-upload" id="file-upload" required >
  <input class="location"  name="location"  id="location" type="checkbox" required >
  <button type="submit" id="save" class="save-icon-btn" >
    <img src="img/Save.png" >
  </button>
</form>

<script type="text/javascript">
  $("#save").click(function()
    {
      var formData = new FormData();
      $f1 = $('#file-upload');
      formData.append('file-upload', $f1.get(0).files[0]);
      formData.append('first_name', first_name.value);
      formData.append('type', type.value);
      formData.append('location', location.value);

     jQuery.ajax(
      {
        type: "POST",
        url: "abc/def",
        data: formData,
        processData: false,
        contentType: false,
        success: function(res) 
          {
            alert(res);
            //console.log(res);
          },
        error: function(errResponse) 
          {
            console.log(errResponse);
          }
      });
      return false;
   });       

但是，如果字段为空，则抛出错误的html默认所需功能无法正常工作。所以在浏览了一下后我发现我需要更改我的ajax以使其工作。所以我做了以下改变

取代

 $("#save").click(function() {

我用过

$("#save").submit(function() {

此更改后，所需的功能开始工作，但表单未提交。任何人都可以告诉我如何使所需的功能与ajax表单提交一起工作