1

I have an HTML form, where text fields display for specific sections when an edit button is clicked. When that button is clicked, an attribute on the enclosing div is changed, and the CSS swaps out labels and fields.

Here is the CSS:

div.panel[status = 'view'] .content-label,
div.panel[status = 'edit'] .content-field,
div.panel[status = 'view'] .section-edit,
div.panel[status = 'edit'] .section-save {
    display: block;
}
div.panel[status = 'edit'] .content-label,
div.panel[status = 'view'] .content-field,
div.panel[status = 'edit'] .section-edit,
div.panel[status = 'view'] .section-save {
    display: none;
}

My problem is that some of the content-field inputs, when they are in their hidden state, still trigger the form validation when the onSubmit event occurs. I get an error that says

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

Now, when I see that, the form control element is not focusable, it's invisible. Which leaves me stuck looking for a way to still have this validation occur, but only to have it occur for elements that are visible, since in different situations some will be visible, and some won't be.

I'm using Bootstrap 3, jQuery, and of course HTML/CSS. I'm ideally hoping to avoid having to tie JavaScript logic to the displaying/hiding of the fields, because I like the lightweight CSS solution I've found.

halfer
  • 19,824
  • 17
  • 99
  • 186
craigmiller160
  • 5,751
  • 9
  • 41
  • 75
  • Hi can you please post your code? And have you checked to see if you have `required` on the hidden elements? http://stackoverflow.com/questions/7168645/invalid-form-control-only-in-google-chrome/7264966#7264966 – Michael Coker Feb 17 '17 at 23:07
  • I definitely do. I was wondering if there is some CSS way of disabling the required attribute – craigmiller160 Feb 18 '17 at 14:40
  • No, CSS is just for display. HTML and Javascript modify and change functionality of the markup. – Michael Coker Feb 18 '17 at 15:23

0 Answers0