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.

how can a hidden input be given property required? Validate it with script instead — charlietfl, Mar 03 '13 at 01:25

Ella Ryan · Answer 1 · 2017-03-08T17:02:03.720

11

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();
});

edited Mar 08 '17 at 17:02

answered Jun 04 '13 at 17:16

Ella Ryan

1,155
10
23

1

for firefox you should use find('input:invalid,select:invalid,textarea:invalid') because the first element which is invalid could be a fieldset – boecko Jun 06 '14 at 13:29
What if the invalid fields are in different tabs? – Turdaliev Nursultan Aug 14 '15 at 12:18
@TurdalievNursultan it only picks the *first* invalid control. – HuBeZa Nov 21 '16 at 11:45

Form Control Fault Workaround

1 Answers1