I have a view that pops up a modal when the user clicks add a record. There is a field for the mileage of the user's car so the user can enter their starting mileage and ending to calculate the mileage covered. When a user inputs a value for the ending mileage and that value is lower than the starting mileage and submits the modal, the record does not get stored but the field is highlighted when the modal is opened again. I want to make sure the user sees the error before they submit or when they submit, it should show the error in the modal without them having to open it again. Is there any way to do this?

The code I tried for showing the error:

Controller:

 $request->validate([
            'start_odo' => 'required',
            'end_odo' => 'required|gt:start_odo',
        ]);

View:

<div class="mb-3">
                <label for="recipient-name" class="col-form-label">End ODO</label>
                <input type="number" style="width: 7em" name="end_odo" class="form-control @error('end_odo') is-invalid @enderror" id="end_odo" min="0"  required>
                @error('end_odo')
                <span class="invalid-feedback">{{ $message }}</span>
            @enderror
              </div>

JS that I tried:

<script type="text/javascript">
  function validate()
  {
      var value1;
      var value2;
    
      value1 = parseFloat(document.getElementById('start_odo').value);
      value2 = parseFloat(document.getElementById('end_odo').value);
      if (value2 > value1)
      {
          //we're ok
      }
      else
      {
          alert("Values are not as they should be");
          return false;
      }
  }
</script>