Question

我有一组用于显示时隙的标签。当我提交表单而不选择按钮时，它将时间读取为null并将其存储为null.now。在提交之前未选择时间时，我需要显示一条错误消息。

<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代码。当未选择按钮时，我应该如何发出警报？当我提交表单而不选择按钮时，它将时间读取为null并将其存储为null.now。在提交之前未选择时间时，我需要显示一条错误消息。

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>

未选择按钮时显示错误消息

1 个答案: