Показать сообщение об ошибке, когда кнопка не нажата

Question

У меня есть набор тегов для отображения временных интервалов. когда я отправляю форму без нажатия кнопки, она считывает время как ноль и сохраняет его как ноль. Теперь мне нужно показать сообщение об ошибке, когда время не выбрано перед отправкой.

<div class="slot-list">
    <p class="slot_text">
      <i>* Time slots are in IST</i>
    </p>
<div class="time_scroll">    
  <div class="slot is-available">
      <button class="time-button" id="update" type="button" value="09">
          <span class="time-button-title">09.00am</span>
      </button>
  </div>
  <div class="slot is-available">
      <button class="time-button"id="update" type="button" value="10">
          <span class="time-button-title">10.00am</span>
      </button>
  </div>
  <div class="slot is-available">
      <button class="time-button"id="update" type="button" value="11">
          <span class="time-button-title">11.00am</span>
      </button>
  </div>
  <div class="slot is-available">
      <button class="time-button" id="update" type="button" value="12">
          <span class="time-button-title">12.00pm</span>
      </button>
  </div>
  <div class="slot is-available">
      <button class="time-button"id="update" type="button" value="13">
          <span class="time-button-title">01.00pm</span>
      </button>
  </div>
  <div class="slot is-available">
      <button class="time-button" id="update" type="button" value="14">
          <span class="time-button-title">02.00pm</span>
      </button>
  </div>
  <div class="slot is-available">
      <button class="time-button"id="update" type="button" value="15">
          <span class="time-button-title">03.00pm</span>
      </button>
  </div>
  <div class="slot is-available">
      <button class="time-button"id="update" type="button" value="16">
          <span class="time-button-title">04.00pm</span>
      </button>
  </div>
  <div class="slot is-available">
      <button class="time-button"id="update" type="button" value="17">
          <span class="time-button-title">05.00pm</span>
      </button>
  </div>
  <div class="slot is-available">
      <button class="time-button"id="update" type="button" value="18">
          <span class="time-button-title">06.00pm</span>
      </button>
  </div>
</div>

Здесь я добавляю свой HTML-код. Как мне предупредить, когда кнопка не нажата? когда я отправляю форму без нажатия кнопки, она считывает время как ноль и сохраняет его как ноль. Теперь мне нужно показать сообщение об ошибке, когда время не выбрано перед отправкой.

Answer 1

Попробуй вот так.Я добавил здесь коды js для проверки.

$( "button" ).click(function() {
  $('#timeVal').val($( this ).val())
});
function checkFn(){
  var timeVal = $('#timeVal').val();
  if(timeVal != ""){
    alert(timeVal);
  } else {
    alert("please select time");
    return false;
  }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="some" onsubmit="return checkFn()">
  <div class="slot-list">
    <p class="slot_text">
      <i>* Time slots are in IST</i>
    </p>
    <div class="time_scroll">    
      <div class="slot is-available">
        <button class="time-button" id="update" type="button" value="09">
          <span class="time-button-title">09.00am</span>
        </button>
      </div>
      <div class="slot is-available">
        <button class="time-button"id="update" type="button" value="10">
          <span class="time-button-title">10.00am</span>
        </button>
      </div>
      <div class="slot is-available">
        <button class="time-button"id="update" type="button" value="11">
          <span class="time-button-title">11.00am</span>
        </button>
      </div>
      <div class="slot is-available">
        <button class="time-button" id="update" type="button" value="12">
          <span class="time-button-title">12.00pm</span>
        </button>
      </div>
      <div class="slot is-available">
        <button class="time-button"id="update" type="button" value="13">
          <span class="time-button-title">01.00pm</span>
        </button>
      </div>
      <div class="slot is-available">
        <button class="time-button" id="update" type="button" value="14">
          <span class="time-button-title">02.00pm</span>
        </button>
      </div>
      <div class="slot is-available">
        <button class="time-button"id="update" type="button" value="15">
          <span class="time-button-title">03.00pm</span>
        </button>
      </div>
      <div class="slot is-available">
        <button class="time-button"id="update" type="button" value="16">
          <span class="time-button-title">04.00pm</span>
        </button>
      </div>
      <div class="slot is-available">
        <button class="time-button"id="update" type="button" value="17">
          <span class="time-button-title">05.00pm</span>
        </button>
      </div>
      <div class="slot is-available">
        <button class="time-button"id="update" type="button" value="18">
          <span class="time-button-title">06.00pm</span>
        </button>
      </div>
    </div>
  </div>
  <input type="hidden" name="time" id="timeVal" />
  <input type="submit" value="submit" />
</form>