Question

我有一个网站的大表单，有多个必填字段，并且所有这些字段都运行正常，当我单击表单上的提交时，网页滚动到字段的位置并显示错误消息，除了两个部分，“旅客人数”和“旅行日期”。这是两者的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>

这是指向操作页面的链接：http://www.eliteware.co/92/form/

Answer 1

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

https://stackoverflow.com/a/28340579/616813

另外，请记住，如果存在错误日志，那么首先要检查是否收到错误。这是错误日志的重点，为您提供调试的起点。

或者正如安德烈亚斯所说，“修复控制台中该死的错误...... :)”。

修改

因为它杀了我，我试图对你的申请进行逆向工程。所有这一切都是比较正在运行的文本框和未能找到问题的文本框。真的，这很容易。

aria-required="true"

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

检查你的CSS并更新它。不，我不知道为什么“aria = required”和“required”属性表现不同。这肯定是新的东西。

Answer 2

您使用的是哪种浏览器？ Safari例如不支持所需。在这种情况下，您需要一个后退功能，如下所述：

Required Attribute Not work in Safari Browser

HTML必填字段未填写时未显示消息

2 个答案: