คุณสมบัติ HTML DOM Input Time required

คุณสมบัติ required ของ HTML DOM Input Time ใช้กำหนดหรือตรวจสอบว่าช่องป้อนเวลา (<input type="time">) จำเป็นต้องกรอกก่อนส่งฟอร์มหรือไม่

ไวยากรณ์ (Syntax)

การดึงค่า required

inputTimeObject.required

การกำหนดค่า required

inputTimeObject.required = booleanValue

ค่าบูลีน (Boolean Values)

ตัวอย่างการใช้งาน

ตัวอย่างฟอร์มจองนัดหมาย - ตรวจสอบว่ากรอกเวลาแล้วหรือยัง

<!DOCTYPE html>
<html>
<head>
<title>Input Time required</title>
<style>
  form {
    width: 70%;
    margin: 0 auto;
    text-align: center;
  }
  * {
    padding: 2px;
    margin: 5px;
  }
  input[type="button"] {
    border-radius: 10px;
  }
</style>
</head>
<body>
<form>
  <fieldset>
    <legend>Time-required</legend>
    <label for="TimeSelect">นัดหมายกับหัวหน้า:</label> 
    <input type="time" id="TimeSelect" required> 
    <input type="button" onclick="fixMeeting()" value="Fix Meeting"> 
    <div id="divDisplay"></div> 
  </fieldset> 
</form> 
<script> 
  var divDisplay = document.getElementById("divDisplay"); 
  var inputTime = document.getElementById("TimeSelect"); 
  function fixMeeting() { 
    if(inputTime.required === true && inputTime.value === '') 
      divDisplay.textContent = 'The meeting time is required'; 
    else 
      divDisplay.textContent = 'The meeting time fixed at: ' + inputTime.value; 
  } 
</script> 
</body>
</html>

ผลลัพธ์

คลิก "Fix Meeting" โดยไม่กรอกเวลา - แสดง "The meeting time is required"

คลิก "Fix Meeting" พร้อมกรอกเวลา - แสดง "The meeting time fixed at: [เวลาที่กรอก]"

หมายเหตุ: การตรวจสอบ required ทำงานร่วมกับการส่งฟอร์มปกติ (type="submit") แต่ตัวอย่างใช้ปุ่มแบบปกติ จึงต้องตรวจสอบด้วย JavaScript เอง