Last Updated: June 03, 2019
·
43.56K
· agripinoduarte

Prevent "An invalid form control with name=" errors

I've just got this issue working with HTML forms in Chrome and Firefox. With Firefox, the built-in form validator popped a tooltip usually showed in empty input fields that contains the attribute "required=required", but the tooltip popped in the Firefox menu, above the window title bar, not in a input.

In Chrome, opening the console, I got this message: "An invalid form control with name=... is not focusable"

After googling the solution I discovered (in Stackoverflow), that this error occurs when a hidden input without a parent "form" element is placed on the code. In fact, my form has a hidden modal with some "orphan" inputs (no form declared) and some fields had the "required" attribute, thanks to TwitterBootstrap plugin for CakePHP that automagically places this attribute when a field is declared "required" on the Model.

To solve this, I declared "required => false" on Form->input method, so the input element doesn't have the required attribute. And done! Problem solved.

Check the Stackoverflow thread here: http://stackoverflow.com/questions/22148080/an-invalid-form-control-with-name-is-not-focusable

3 Responses
Add your response

Can you show us an example code?

over 1 year ago ·

$this->Form->hidden('id', array(
'required' => false,
'value' => 1
));

over 1 year ago ·

Add novalidate in Form tag

over 1 year ago ·