Javascript HTML必填字段在显示消息时不显示消息'；没有填写

我有一个网站的大表单，有多个必填字段，它们都工作得很好，当我点击表单上的提交时，网页滚动到该字段的位置并显示一条错误消息，除了“旅行者数量”和“旅行日期”两部分。 这是它们的HTML：

<div class="sect-txt" style="margin-top:100px;" id="op">
 <h1> Date of the trip </h1>
 <div class="al">
  <h1 style="font-family:Montserrat;font-size:14px;color:#161616;margin-bottom:5px;"> Check In </h1> 
  <input type="date" class="hide-replaced" data-date-size="1" placeholder="Check-in" name="checkin" required />
 </div>
 <div class="al">
  <h1 style="font-family:Montserrat;font-size:14px;color:#161616;margin-bottom:5px;"> Check Out </h1> 
  <input type="date" class="hide-replaced" data-date-size="1" placeholder="Check-out" name="checkout" required />
 </div>
 <a href="#four">
  <div class="btn-nxt" style="position:relative;top:137px;">
   NEXT
  </div>
 </a>
</div>

<div class="sect-txt">
 <h1> Number of travelers </h1>
 <input type="number" class="f-2" placeholder="Adults" name="adults" required/>
 <input type="number" class="f-3" placeholder="Children" name="childrens" required/>
 <a href="#fif">
  <div class="btn-nxt-b">
   NEXT
  </div>
 </a>
</div>

旅行日期
登记入住
退房
旅客人数

---

这是一个指向正在运行的页面的链接：

您的按钮不可聚焦，因为当它必须再次接收焦点时，您试图隐藏它。请查看以下链接，以了解发生这种情况的更多信息。基本上，您隐藏了在需要验证时应该接收焦点的对象。如果不希望发生这种情况，可以在隐藏之前进行验证，或者在验证失败时取消隐藏对象

另外，请记住，如果存在错误日志，这是检查是否收到错误的第一点。这就是错误日志的全部要点，为您提供了调试的起点

或者正如Andreas所说，“修复控制台中该死的错误…：）”

编辑：

因为这让我很痛苦，我试图对你的应用程序进行反向工程。只需将正常工作的文本框与未发现问题的文本框进行比较。真的，很简单

aria-required="true"

“成人”和“儿童”输入字段具有此属性。您需要

required=“true”

---

检查你的css并更新它。不，我不知道为什么“aria=required”和“required”属性的行为不同。这确实是一个新的东西。

也许您应该首先修复所有错误（列在控制台中）：无法读取属性。。。为空。。。不是一个函数。。。不可聚焦（！）@Andreas在我的待办事项列表中。只需要先解决这个问题。@DS87我认为这是不可能的。请再次检查查看来源：感叹号（！）的存在是有原因的；）当您查看链接中提供的源代码时，成人和儿童字段没有必需的属性！你能详细说明一下如何解决这个问题吗？这需要我们查看代码。我可以给你一个主意。删除所需字段的隐藏选项。如果您想隐藏它，那么在隐藏之前编写您自己的验证函数来运行。关键是，您不能隐藏该元素然后运行验证。所以，决定你是否真的需要隐藏。这是一个行为更改，因此无法提供精确的代码进行修复。已发现问题。修复你的css，然后再次测试；