HTML required attribute not working with AJAX submission

I have created a model Form and set its input field to require attribute but its not working with ajax

<div   id="ajax-book-model" aria-hidden="true" data-backdrop="static" data-keyboard="false">
  <div >
    <div >
      <div >
        <h5  id="ajaxBookModel">Add New Machine</h5>
        <!-- <button type="reset"  data-bs-dismiss="modal" aria-label="Close"></button> -->
         <button type="button"  data-dismiss="modal" aria-label="Close" onClick="window.location.reload();">
      </div>
      <div >
      <form action="javascript:void(0)" id="addEditBookForm" name="addEditBookForm"  method="POST">
         <input type="hidden" name="id" id="id">
         <input type="hidden" name="user_id" id="user_id" value="{{ Auth::user()->id }}">
        <div >
           <div >
            <div >     
              <label>Name</label>
              <input type="text" id="machine_name" name="machine_name"  placeholder="Enter Machine Name" required>
              <span >{{ $errors->first('machine_name') }}</span>
            </div>
           </div>
            <div >
            <div >     
              <label>IOT Device ID</label>
              <input type="text" id="iot_device_id" name="iot_device_id"  placeholder="Enter IOT Device ID" required>
            </div>
           </div>
            <div >
            <div >     
              <label>Local device ID</label>
              <input type="text" id="local_device_id" name="local_device_id"  placeholder="Enter Local Device ID" required>
            </div>
           </div>
        </div>
      </div>
       <div >
        <button type="button"  data-dismiss="modal" onClick="window.location.reload();">Close</button>
        <button type="submit" id="btn-save" value="addNewBook" >Save</button>
      </div>
      </form>
    </div>
  </div>
</div>   

and this is ajax code

i just want to run simpal html required field validation with 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);
           }
        });
    });

i just want to run required field validation with ajax i could not find any solution .

CodePudding user response：

Try changing your btn click event to form submit event.

$('body').on('submit', '#addEditBookForm', 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);
        }
    });
});

CodePudding user response：

The following should help: change to a form confirmation event instead of a Click button event. And do not forget to write this code so that the page does not reload: event.preventDefault();