StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You've set the field to be <code>required</code>, so the problem you are experiencing is probably the browser based form validation.</p> <p>The problem is that the validation applies <em>before</em> TinyMCE injects the contents into the textarea, and so the validation will always fail as the textarea is empty. This is a very long known "bug" btw:</p> <p><a href="http://www.tinymce.com/develop/bugtracker_view.php?id=4768" rel="nofollow">http://www.tinymce.com/develop/bugtracker_view.php?id=4768</a> <a href="http://www.tinymce.com/develop/bugtracker_view.php?id=5671" rel="nofollow">http://www.tinymce.com/develop/bugtracker_view.php?id=5671</a></p> <p>In Firefox you might notice a validation bubble that appears "behind" the browser in the bottom left corner of the screen, and in Chrome for example it would throw the following error: "<strong><em>An invalid form control with name='...' is not focusable</em></strong>".</p> <p>The quick and dirty fix would be to set <code>required</code> to <code>false</code>. In order to keep the <code>required</code> class on the generated container <code>div</code> you would have to set this manually using the <code>div</code> option:</p> <pre><code>'div' => array('class' => 'input text required') </code></pre> <p>It's also possible to disable browser validation completely by defining the <code>novalidate</code> attribute on the form:</p> <pre><code>$this->Form->create('ModelName', array('novalidate' => true)); </code></pre> <p>or using the <code>formnovalidate</code> attribute on the submit button:</p> <pre><code>$this->Form->submit('Submit', array('formnovalidate' => true)); </code></pre> <p>Theoretically it would also be possible to listen to the <code>invalid</code> event and display custom validation bubbles, but the problem here is that the browser behavior is not consistent, ie in Chrome it's not possible to validate invisible (using <code>display</code> or <code>visibility</code>) fields. Also the content would still be missing in the textarea field.</p> <p>What seems to work is using <code>opacity</code> to hide the field, that way one could position the textarea under the editor, and the validation bubble would be displayed correctly. However that would also require to inject the editor contents in the textarea manually when pressing <kbd>Enter</kbd> and when clicking the submit button (or probably even simpler using proper editor change events). I'll see if I can come up with an example for this later on.</p> <p><strong>Update:</strong> I've implemented a fix/workaround in form of a TinyMCE 4.x plugin, as this was bugging me in some of my own applications too, see <a href="https://github.com/ndm2/tinymce-validatable" rel="nofollow">https://github.com/ndm2/tinymce-validatable</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload