HTML必需属性不适用于AJAX提交
我已经创建了一个模型表单，并将其输入字段设置为require attribute，但它不适用于ajax

<div class="modal fade hide"  id="ajax-book-model" aria-hidden="true" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="ajaxBookModel">Add New Machine</h5>
        <!-- <button type="reset" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> -->
         <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close" onClick="window.location.reload();">
      </div>
      <div class="modal-body">
      <form action="javascript:void(0)" id="addEditBookForm" name="addEditBookForm" class="form-horizontal" method="POST">
         <input type="hidden" name="id" id="id">
         <input type="hidden" name="user_id" id="user_id" value="{{ Auth::user()->id }}">
        <div class="row">
           <div class="col-sm-12 col-md-4">
            <div class="form-group">     
              <label>Name</label>
              <input type="text" id="machine_name" name="machine_name" class="form-control form-control-sm" placeholder="Enter Machine Name" required>
              <span class="text-danger">{{ $errors->first('machine_name') }}</span>
            </div>
           </div>
            <div class="col-sm-12 col-md-4">
            <div class="form-group">     
              <label>IOT Device ID</label>
              <input type="text" id="iot_device_id" name="iot_device_id" class="form-control form-control-sm" placeholder="Enter IOT Device ID" required>
            </div>
           </div>
            <div class="col-sm-12 col-md-4">
            <div class="form-group">     
              <label>Local device ID</label>
              <input type="text" id="local_device_id" name="local_device_id" class="form-control form-control-sm" placeholder="Enter Local Device ID" required>
            </div>
           </div>
        </div>
      </div>
       <div class="modal-footer">
        <button type="button" class="btn btn-sm btn-gradient-danger mb-2" data-dismiss="modal" onClick="window.location.reload();">Close</button>
        <button type="submit" id="btn-save" value="addNewBook" class="btn btn-sm btn-gradient-danger mb-2">Save</button>
      </div>
      </form>
    </div>
  </div>
</div>

这是ajax代码
我只是想运行simpal html所需的字段验证与ajax

$('body').on('click','#btn-save', function (event){
      event.preventDefault();
          var id = $("#id").val();
          var user_id = $("#user_id").val();
          var machine_name = $("#machine_name").val();
          var iot_device_id = $("#iot_device_id").val();
          var local_device_id = $("#local_device_id").val();
          $("#btn-save").html('Please Wait...');
          $("#btn-save"). attr("disabled", true);
         
        // ajax
        $.ajax({
            type:"POST",
            url: "{{ url('add-update-piezometer') }}",
            data: {
              id:id,
              user_id:user_id,
              machine_name:machine_name,
              iot_device_id:iot_device_id,
              local_device_id:local_device_id,
            },
            dataType: 'json',
            success: function(res){
             window.location.reload();
            $("#btn-save").html('Submit');
            $("#btn-save"). attr("disabled", false);
           }
        });
    });

我只是想运行所需的字段验证与ajax我找不到任何解决方案。