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

[mattmenefee]

When removing an association using the link_to_remove_association helper, cocoon essentially hides the group of fields in order to allow the _destroy attribute to be passed back to the server to remove the association from the database. This works fine except when a nested field is given the HTML5 required attribute and the field is left blank before the association is removed. Chrome (currently the only browser that we've experienced this issue with) throws a javascript error stating that An invalid form control with name='some_field_name' is not focusable. because the browser isn't able to display the HTML5 validation popup on the now-hidden field. Currently, our workaround is to remove the required attribute from any nested field when the association is removed.

  # Remove required attribute after cocoon removes dynamic form from the page
  $('body').on 'cocoon:after-remove', (event, removedItem) ->
    removedItem.find('input[required]').each (index, element) ->
      $(element).removeAttr('required')

However, I was wondering if this is something cocoon would want to handle internally. The only issue I can see with this implementation is that if the application has a button to un-remove the association, then cocoon would need to keep track of which fields originally had the required attribute in order to reset the form back to its original state. Do you have any thoughts on this?

[nathanvda]

Interesting, thanks for bringing it to my attention. Frankly in general i avoid html5 form validation, because it is so ugly and hard to style (and browser-dependant). So I have been reading up a little on this. Bizar that chrome checks hidden/non-visible fields, because a user is not able to edit them anyway. I read two possible approaches: add a disabled or novalidate tag to inputs when they are required upon hiding (as to stop validating that field). This would also enable a "unhide" (although that is not really in cocoon's scope imho, because until you save a user can just reload the page to get the previous situation again, or press cancel).

I will try to look into this later today/tonight 😉

[victorlcampos]

Same here