首页 > 解决方案 > js air-datepicker 输入和必需的不起作用

问题描述

我使用air-datepicker输入但必需的属性不起作用

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/css/datepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/datepicker.min.js"></script>



<form>
<input type="text" class="datepicker-here" id="dob" required readonly ></input>

<button type="submit">submit</button>
</form>

标签: javascripthtml

解决方案


不要过多解释为什么会发生这种情况,因为我不使用该日期选择器,为什么您根本不使用 JS 创建自己所需的检查?我看到只读正在工作......

document.getElementById("myform").addEventListener("submit", function(event) {
  event.preventDefault()
  if (document.getElementById("dob").value === "") {
    window.alert("Date empty!");
    // Create here what you wish, tooltip, alert, css styling, html alert...
  } else {
    document.getElementById("myform").submit();
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/css/datepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/datepicker.min.js"></script>



<form id="myform">
  <input type="text" class="datepicker-here" id="dob" required readonly>

  <button type="submit">submit</button>
</form>


推荐阅读