Google chrome "An invalid form control is not focusable" using jQuery Tabs

2
votes

I have created a form which is split into many "tabs" using jQuery; and the fields which are found in the various tabs.

All the fields in the form have their checks in place, some are required, some must have a minimum value, etc.

However, when I try to submit a form with invalid values in fields, if those fields are under a tab different from the current, I get an error on the console from Google Chrome:

An invalid form control is not focusable

but the user sees no effect, nor can s/he find the wrong field since it has not been highlighted by the browser.

I have already read the answers to the following questions:

However, they all say to give the correct name to the fields (already done) or to remove the "required attribute" (cannot do that, it's there for a reason!).

I would like to underline that I am also doing server side validation, and so this is not the topic of this question.

How can I keep HTML5 validation in the form while at the same time avoiding that error?

EDIT:

Here you can find an example of what I am describing, even though that is much simpler than the actual form, if you load it in Google Chrome and submit the form right away, you'll see the error in your console.

<form id="form_tabs" name="form_tabs" method="post" action="">
  <div id="tabs" class="ui-tabs">
    <ul>
      <li><a rel="tabs" href="#tab1">FIRST TAB</a></li>
      <li><a rel="tabs" href="#tab2">SECOND TAB</a></li>
    </ul>

    <div id="tab1" class="ui-tabs-hide">
      <input type="text" name="text1" id="text1" value="" placeholder="I am NOT required"/>
    </div>

    <div id="tab2" class="ui-tabs-hide">
      <input type="text" name="text2" id="text2" value="" placeholder="I REALLY am required!" required="required"/>
    </div>
  </div>

  <br/>
  <button type="submit" value="submit">
    SEND FORM
  </button>
</form>
3
jqueryhtmlvalidationgoogle-chrometabs
I am also trying to create a fiddle to show the issue. – Matteo Tassinari
It is because you are using tabs that you get this error. The currently not visible tabs are set to display:none – and the browser can not focus a form field inside such a hidden tab. // If you want to use tabs, then you should probably do validation on each tab separately with JS, otherwise I’d say it is rather bad UX to begin with. – CBroe
I know the reason why it happens, but I'd like to keep the current UI and HTML5 checks in place if possible, just "intercept" the error and show the right tab. – Matteo Tassinari
To “intercept” it I think you will have to check the validity of the form yourself (HTML5 provides methods for that), and then make sure the first relevant element is visible (by activating the tab it is on.) – CBroe
I'll investigate into that, thanks for the heads-up! – Matteo Tassinari

3 Answers

6
votes

This appears to work a little like answer from Vilriana :

//when submitted if there was an issue
 $("form input").on("invalid", function() {
        //find tab id           
        var element = $(this).closest('.ui-tabs-panel').index();
         //goto tab id
        $('#yourTabs').tabs('option', 'active', element)
 });
1
votes

Browsers don't know how to show a tab with invalid control. So you need to handle it manually.

document.querySelector('#form_tabs').addEventListener('invalid', function(event) {
    // Check event.target, and show its owner tab.  e.g.
    event.target.parentNode.classList.remove('ui-tabs-hide');
}, true);
0
votes

I had the same problem and solved it with 

$("form input").on("invalid", function() {
    $(this).parents('.parentdiv').find('.div').show()
});

this will popup the div with the invalid data and shows the message