HTML required attribute not working with AJAX submission

January 9, 2023

I have created a model Form and set its input field to require attribute but its not working with 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>

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 .

>Solution :

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);
        }
    });
});