我有一个很大的网站表单,有多个必填字段,并且所有这些字段都工作正常,当我单击表单上的“提交”时,网页滚动到该字段的位置并显示错误消息,除了两个部分、“旅客人数”和“旅行日期”。 这是它们的 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/
最佳答案
您的按钮不可聚焦,因为当它必须再次获得焦点时您试图隐藏它。检查以下链接以获取有关发生这种情况的原因的更多信息。基本上,您隐藏了在需要验证时应该接收焦点的对象。如果您不希望发生这种情况,您可以在隐藏之前进行验证,或者在验证失败时取消隐藏对象。
https://stackoverflow.com/a/28340579/616813
另外,请记住,如果存在错误日志,这是检查您是否收到错误的第一个点。这就是错误日志的全部意义,为您提供调试的起点。
或者正如安德烈亚斯所说,“修复控制台中该死的错误......:)”。
编辑:
因为这让我很痛苦,所以我尝试对你的应用程序进行逆向工程。只需比较正在运行的文本框和未能找到问题的文本框即可。真的,就这么简单。
aria-required="true"
您的“成人”和“ child ”输入字段具有此属性。您需要改为 required="true"
。
检查你的 CSS 并更新它。不,我不知道为什么“aria=required”和“required”属性的行为不同。这肯定是需要学习的新东西。
关于javascript - HTML 必填字段未填写时不会显示消息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44862750/