javascript - Form Control Fault Workaround - Stack Overflow

admin管理员组

文章数量:1410724

I am trying to get around the:

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

Error that es 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.

I am trying to get around the:

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

Error that es 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.

• javascript
• jquery
• google-chrome
• error-handling
• jquery-events

Share Improve this question Follow edited Jun 17, 2021 at 8:59 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Mar 3, 2013 at 0:01 greycodegreycode 11366 silver badges1616 bronze badges 1

• how can a hidden input be given property required? Validate it with script instead – charlietfl Commented Mar 3, 2013 at 1:25

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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();
});

本文标签： javascriptForm Control Fault WorkaroundStack Overflow