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
Written by José Agripino Duarte
Related protips
3 Responses
Can you show us an example code?
$this->Form->hidden('id', array(
'required' => false,
'value' => 1
));
Add novalidate in Form tag
Have a fresh tip? Share with Coderwall community!
