TinyMCE and HTML5 form validation

Question

I am using TinyMCE in a Rails application. In my form, I have a description field with TinyMCE, and this field is required to validate the form.

But when I try to submit my form, I cannot, due to HTML5 form validation. My browser (Chrome and Firefox) tells me that the field is empty. And I have another problem. When Chrome displays a dialog box for an empty field, it appears at the top of my page, and not next to my form field.

Answer 1

I used the "oninit" parameter in the text areas and worked:

oninit: function(editor) { $currentTextArea.closest('form').bind('submit, invalid', function() { editor.save(); }); } 

You can try using the onChange event, but it does not work properly in Firefox.

My full code is:

 $('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 2

FF displays the bubble for the requested file, but in the wrong place, Chrome throws an error because it cannot find the field for displaying the bubble. Therefore, my solution turns off the display: no style is set by TinyMCE and does not reduce the size of the field and make visibility hidden. thus, the browser will show a bubble next to this field, since this field is next to the TinyMCE editor, the user will know what is not required.

 textarea.tinymce { background: transparent; border: none; box-shadow: none; display: block !important; height: 0; resize: none; width: 0; visibility: hidden; } 

Answer 3

I took the @lucaswxp code and changed it a bit because Firefox threw an error ($ this.is is not a function if I remember it correctly). I also changed the way code is run:

  $this.tinymce(options); 

in

 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 a miracle :)