使用 JavaScript 进行表单控制

Question

我需要这样做：

使用表格，必须填写所有数据才能发送。

一键发送，如果输入元素没有全部填写/选择或填写错误，需要报错并阻止发送。错误消息显示在屏幕中间固定位置的 div 元素中，位于显示消息的所有其他元素之上。

当你点击那个 div 元素的任何地方时，它应该会消失；如果您有选择（下拉、菜单、单选等），如果至少选择了一个选项（无论 有必要检查 HTML 的条件）。

除了检查输入的所有元素外，还需要对离开字段（eng. focus out）的事件进行验证（稍后列出），并显示前面描述的带有适当消息的 div。

每次在 div 元素中显示一条特定的消息，直到它被更正。同一条消息不能重复。

填写错误的字段必须特别标记/设计。

额外的验证是：

1. 所有文本数据不得包含特殊字符（！、？、#、<,>）。 - 强制的 使用正则表达式。
2. 多行文本：接受最少 10 个字符，最多 1000 个字符。不允许 字符是：(!,?,#,<,>) - 你必须使用正则表达式。
3. 选择的日期不能是过去的。
4. 时间条目元素被禁用，直到它被选中 正确的日期。
5. 如果选择的日期是今天的日期，小于当前时间的时间不能输入。

这是我的表格代码：

<form id="form1" method="post" action="form.php">
  <fieldset id="personalInfo">
    <legend>Personal Information</legend>
    <label for="firstName">First Name:</label>
    <input type="text" id="firstName" name="firstName"><br>
    <label for="lastName">Last Name:</label>
    <input type="text" id="lastName" name="lastName"><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br>
    <label for="contactNumber">Contact Number:</label>
    <input type="tel" id="contactNumber" name="contactNumber"><br>
    <label for="numberOfPersons">Number of Persons:</label>
    <input type="number" id="numberOfPersons" name="numberOfPersons" value="1" min="1" required>
  </fieldset>
  <fieldset id="roomSelection">
    <legend>Room Selection</legend>
    <label for="roomType">Room Type:</label>
    <select id="roomType" name="roomType" required>
      <option value="">Select Room Type</option>
      <option value="single">Single Room</option>
      <option value="double">Double Room</option>
      <option value="triple">Triple Room</option>
      <option value="quad">Quad Room</option>
      <option value="dormitory">Dormitory</option>
      <option value="extraBed">Extra Bed</option>
      <option value="singleWithChild">Single Room with Child</option>
    </select>
    <label for="checkInDate">Check-in Date:</label>
    <input type="date" id="checkInDate" name="checkInDate" required><br>
    <label for="checkOutDate">Check-out Date:</label>
    <input type="date" id="checkOutDate" name="checkOutDate" required><br>
    <label for="checkInTime">Check-in Time:</label>
    <input type="time" id="checkInTime" name="checkInTime" required><br><br>
    <button id="bookNow" type="submit">Book Now</button>
    <button type="reset">Refresh</button>
  </fieldset>
</form>

我试着用警报消息来做到这一点，但我什至无法让任何警报弹出到我的屏幕上。