TinyMCE and HTML5 form validation

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;
}