I have a big form for a website, with multiple required fields, and all of them are working perfectly, when i click submit on the form, the web page scroll to the field's location with an error message, except on two parts, the "Number of travelers" and the "Date of the trip". This is the HTML for both of them:

<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>

And this is a link to the page in action: /

I have a big form for a website, with multiple required fields, and all of them are working perfectly, when i click submit on the form, the web page scroll to the field's location with an error message, except on two parts, the "Number of travelers" and the "Date of the trip". This is the HTML for both of them:

<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>

And this is a link to the page in action: http://www.eliteware.co/92/form/

• javascript
• html
• css

• Maybe you should first fix all of the errors (listed in the console): Cannot read property ... of null, ... is not a function, ... is not focusable (!) – Andreas Commented Jul 1, 2017 at 15:55
• @Andreas On my todo list. Just need this to work first. – user3668347 Commented Jul 1, 2017 at 15:59
• @DS87 I don't believe that's possible. Please check again view-source:eliteware.co/92/form – user3668347 Commented Jul 1, 2017 at 16:00
• The exclamation mark (!) is there for a reason ;) – Andreas Commented Jul 1, 2017 at 16:00
• The fields Adults and Children do not have a required attribute when you look at the source code provided at your link! – DS87 Commented Jul 1, 2017 at 16:00

1 Answer 1

Your button is not focusable because you are trying to hide it when it has to receive focus again. Check the following link for more information about why this happens. Basically, you are hiding the object that is supposed to receive focus when validation is needed. If you don't want this to happen, you can probably do validation before hiding, or unhide the object if validation fails.

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

Also, do remember, if an error log exists, that is the first point to check if you receive an error. That is the whole point of error log, to give you a starting point to debug.

Or as Andreas said, "Fix the damn errors in the console... :)".

Edit:

Because it was killing me, I tried to reverse engineer your application. All it took was paring the textbox that was working, and the one that was failing to find the problem. Really, that easy.

aria-required="true"

Your "Adults" and "Children" input fields have this property. You need required="true" instead.

Check your css and update that. And no, I have no idea why "aria=required" and "required" property behave differently. It is something new to learn for sure.