3

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/

  • 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 Jul 01 '17 at 15:55
  • @Andreas On my todo list. Just need this to work first. –  Jul 01 '17 at 15:59
  • @DS87 I don't believe that's possible. Please check again view-source:http://www.eliteware.co/92/form/ –  Jul 01 '17 at 16:00
  • The exclamation mark _(!)_ is there for a reason ;) – Andreas Jul 01 '17 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 Jul 01 '17 at 16:00
  • @DS87 The "real" input fields with the `required` flag are hidden and instead a "fancy" input field is shown instead – Andreas Jul 01 '17 at 16:02
  • @DS87 Checked on multiple browsers, it's "required" and not to mention that the form does not submit until i fill them, the only issue is that it won't scroll to their location and show the error –  Jul 01 '17 at 16:04
  • @Andreas Do you have any thoughts on how to fix this issue? It's driving me crazy –  Jul 01 '17 at 16:05
  • Yes. Fix the damn errors in the console... :) – Andreas Jul 01 '17 at 16:06
  • @Andreas if the errors are causing the problem, how come the rest of the fields are working... –  Jul 01 '17 at 16:11
  • "An invalid form control with name='adults' is not focusable." The error in the console, if you bothered to check it for errors. Focus on click event is failing because your control is not focusable. Andreas is right. Check the console. It is there for a reason. – jitendragarg Jul 01 '17 at 16:26
  • Instead of avoiding to fix those errors (which one of them will at least show you the source of the problem, hence the **(!)**) you should finally start fixing them... – Andreas Jul 01 '17 at 16:27

1 Answers1

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.com/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 comparing 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.

jitendragarg
  • 945
  • 1
  • 14
  • 54
  • Can you elaborate on how to fix this? –  Jul 01 '17 at 16:40
  • It will require us to see the code. I can give you an idea. Remove the hiding option for a required field. If you want to hide it anyway, then write your own validation function to run before hiding. Point is, you cannot hide that element and then run the validation. So, decide on if you really need to hide. It is a behavioral change, so cannot provide exact code to fix. – jitendragarg Jul 01 '17 at 16:43
  • Found the problem. Fix your css and then test again. – jitendragarg Jul 01 '17 at 16:54
  • Just to add that the same behaviour happens if you use scroll-behavior: smooth; – ana.arede Apr 23 '20 at 11:51