How to intercept form onsubmit when required fields are hidden?

Question

I have a large form I'm presenting to the user using bootstrap tabs. On various of the tabs there are input fields that have a required="required" attribute.

<!-- illustrative code only, with all the excess cruft elided -->
<form onsumbit="return somefunction(this);" method=post action="url">
  <fieldset style="display: none;">
    <!-- the hidden tab -->
    <input required name="princess">
  </fieldset>
  <fieldset>
    <input required name="goomba">
  </fieldset>
  <button type=submit>Save</button>
</field>

When there are blank required fields on non-current tabs and I click the submit button then the form is not submitted, but also the browser (Chrome v55) does nothing to alert the user to the blank required fields on the hidden tabs.

I put a onsubmit="return validateForm(this)" handler on the <form…> element thinking I could do something sensible there … but that handler is not being called. It appears the browser is checking all the non-visible inputs for validity and choking before calling the onsubmit handler.

In the console I see an error message of "An invalid form control with name='princess' is not focusable." The princess form control is on another tab (<input type=text name=princess required=required>), and this error is firing before the onsubmit gets a chance to run.

So .. tackling this using <form onsubmit=…> isn't the right strategy.

What can I do to run some js when the user attempts to submit the form and have that js gracefully do the necessary?

How about using libraries like http://jqueryvalidation.org/ and _not_ use the `required` HTML5 property? Or you may remove `required` from the hidden input fields and let `onsubmit` do the rest? — Sunny Pun, Feb 06 '17 at 09:17
If there's a required field on the first tab, it is still required if the view is set to the second tab. For the case of conditionally-required fields I hide if not-required and I also set the disabled=disabled attribute, which renders required=required moot for that field. — Erics, Feb 06 '17 at 10:39
So far I've figured out that
fires *after* browser validation (and thus can not fire if there's an error due to a non-focusable invalid input) … however — Erics, Feb 07 '17 at 06:45

score 0 · Answer 1 · edited May 23 '17 at 12:09

A rough draft of not using required in HTML5 and let JS do the validation. It doesn't use the inline onsubmit=...

This is a draft of not a very good programming style (a mix of jQuery & non-jQuery and hacks for switching "tabs"). Form-submission cancellation referenced from this answer.

Try it on CodePen

You may pass the form element to a validate(form) function inside the event handler, so you may implement your own validate() to check if the fields are filled (required), with valid values (like dates / values within a range).

At least, this does "run some js when the user attempts to submit the form and have that js gracefully do the necessary". ;)

Hope this helps!

How to intercept form onsubmit when required fields are hidden?

1 Answers1