TinyMCE and HTML5 form validation - html

Question

I'm using TinyMCE in a Rails application. In my form, I have a "description" field with TinyMCE and this field is mandatory for the form validation.
But when I try to submit my form, I can't, because of the HTML5 form validation. My browser (Chrome and Firefox) tells me that the field is empty. And I have another problem. When Chrome displays the dialog for the empty field, it appears on the top of my page, not near my form field.

Answer 1

FF show up a bubble for required fileld but at wrong place, Chrome throws an error because it can't find field to show bubble.. So my solution is disable display:none style set by TinyMCE and reduce the field size and make its visibility hidden. this way browser will show bubble next to this field as this field is next to TinyMCE editor user will know what required field is missing.
textarea.tinymce {
background: transparent;
border: none;
box-shadow: none;
display: block !important;
height: 0;
resize: none;
width: 0;
visibility: hidden;
}

Answer 2

I used the "oninit" option in the textareas and worked:
oninit: function(editor) {
$currentTextArea.closest('form').bind('submit invalid', function() {
editor.save();
});
}
You could try to use onChange event, but it doesn't work properly in Firefox.
My complete code:
$('textarea.tinymce').each(function(){
var options = {
theme : "advanced",
skin : "cirkuit",
plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template", theme_advanced_buttons1 :"formatselect,fontsizeselect,forecolor,|,bold,italic,strikethrough,|,bullist,numlist,|,justifyleft,justifycenter,justifyright,|,link,unlink,|,spellchecker",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true
},
$this = $(this);
// fix TinyMCE bug
if ($this.is('[required]')) {
options.oninit = function(editor) {
$this.closest('form').bind('submit invalid', function() {
editor.save();
});
}
}
$this.tinymce(options);
});

Answer 3

I took #lucaswxp code and changed it a bit, because Firefox was throwing an error ($this.is not a function, if I recall it correctly).
Also I changed the way it fires the code from:
$this.tinymce(options);
to:
tinymce.init(options);
Full code:
$(window).load(function() {
var options = {
selector: 'textarea',
skin: "lightgray"
},
$this = $(this);
// fix tinymce bug
if ($this.is('[required]')) {
options.oninit = function(editor) {
$this.closest('form').bind('submit, invalid', function() {
editor.save();
});
}
}
tinymce.init(options);
});
Many thanks to the creator, it worked like wonder :)