Form Control Fault Workaround

Question

I am trying to get around the:

An invalid form control with name='dob_mm' is not focusable.

Error that comes in Chrome. Yes, we have a bunch of fields that are required, and yes, these fields are hidden. The form is broken out into tabs, which only one show at a time.

Is there some type of Jquery function that can show some type of popup saying "you must fill out the information in the other tabs"?

I look here but didn't tell me much.

Answer 1

You should do your own validation but as a backup there is a workaround to prevent against these errors in Chrome.

The basic method is this:

• In the submit button click event detect which field failed the browser validation using the :invalid pseudo-class that Chrome adds to the field with the error.
• Find that field's parent container (eg the tab it's on) and make that container visible.

This will ensure that the user is directed to the tab with the error and Chrome's validation will not fail because the field will be focusable.

A very basic version is something like this:

$('#inputbutton').click(function(){
    //find the invalid field
    $('#myform').find(':invalid').first()
    //find it's parent tab and show it
    .parents('.tab-pane').show();
});