HTML 必填字段在未填寫時不顯示消息

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

另外，請記住，如果存在錯誤日志，這是檢查您是否收到錯誤的第一點。 這就是錯誤日志的全部內容，為您提供調試的起點。

或者正如 Andreas 所說，“修復控制台中該死的錯誤...... :)”。

編輯：

因為它讓我很傷心，所以我試圖對您的應用程序進行逆向工程。 所需要的只是比較正在工作的文本框和未能找到問題的文本框。 真的，那么容易。

aria-required="true"

您的“成人”和“兒童”輸入字段具有此屬性。 您需要required="true"代替。

檢查您的 css 並更新它。 不，我不知道為什么“aria=required”和“required”屬性的行為不同。 這肯定是學習新的東西。