当 url 为空数组时如何添加错误消息？

Question

这是我在更改日期时获取时间段的代码部分，如果所选日期没有时间段，我需要在此处显示错误或警告消息。但我添加的消息仍然没有显示。我在这里做错了什么！

function changeBookingDate() {
  var date = $('#booking-date').val();
  var doctorId = $('#doctor-list').val();
  $('#time').hide();
  if (date != null && doctorId != null) {
    console.log(date, doctorId);
    $.ajax({
      url: '{{url("bookings")}}/' + doctorId + '/' + date,
      type: 'GET',
      success: function(result) {
        $('#time').show();
        if (result) {
          $('#booking-time').html('<option selected="selected" value="">Select Time</option>');
          $.each(result, function(index, data) {
            $('#booking-time').append('<option value="' + data.value + '">' + data.text + '</option>');
          });
        } else {
          showErrorMsg('The selected doctor is away on selected Date');
          $('#addBtn').prop('disabled', false);
        }

      }
    });

  } else {
    $('#booking-time').val('');
  }
}

<form id="new-booking-form">
  <div class="form-group">
    <label for="doctor-list">Doctor</label>
    <select id="doctor-list" name="doctor" style="width:100%" onChange="changeBookingDate()"></select>
  </div>
  <div class="form-group">
    <label for="booking-date">Date</label>
    <div class="input-group date">
      <input type="text" class="form-control datePicker1" autocomplete="off" name="date" id="booking-date" onChange="changeBookingDate()" />
      <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
    </div>
  </div>
  <div class="form-group" style="display:none" id="time">
    <label for="patient-list">Time Slot</label>
    <select id="booking-time" name="doctor" class="form-control"></select>
  </div>
</form>

Answer 1

我猜你的意思是这个

const showErrorMsg = str => {
  alert(str)
};

function changeBookingDate() {
  var date = $('#booking-date').val();
  var doctorId = $('#doctor-list').val();
  $('#time').hide();
  if (!date || !doctorId) return;

  $.ajax({
      url: '{{url("bookings")}}/' + doctorId + '/' + date,
      type: 'GET',
      success: function(result) {

    if (result && result.length > 0) {
      $('#booking-time').html('<option selected="selected" value="">Select Time</option>');
      $.each(result, function(index, data) {
        $('#booking-time').append('<option value="' + data.value + '">' + data.text + '</option>');
      });
      $('#time').show();
    } else {
      showErrorMsg('The selected doctor is away on selected Date');
      $('#addBtn').prop('disabled', false);
    }
  });  
}

如果还是不行，那就是服务器问题！

Answer 2

<input type="date" required id="booking-date">

然后，如果没有值，它会自动显示消息。 将其包装在非操作表单中，以便在焦点更改时自动验证。