Walidacja formularza TinyMCE i HTML5

Question

Używam TinyMCE w aplikacji Rails. W mojej formie mam pole "description" z TinyMCE i to pole jest obowiązkowe dla sprawdzania poprawności formularza.

Ale gdy próbuję przesłać formularz, nie mogę, z powodu sprawdzania formularza HTML5. Moja przeglądarka (Chrome i Firefox) mówi mi, że pole jest puste. I mam inny problem. Gdy Chrome wyświetla okno dialogowe dla pustego pola, pojawia się na górze mojej strony, a nie w pobliżu pola formularza.

Answer 1

użyłem opcji „OnInit” w pola tekstowe i pracował:

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

Można spróbować użyć onChange imprezę, ale to nie działa prawidłowo w Firefoksie.

mój pełny kod:

$('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 pokazać się bańki na wymaganym fileld ale w złym miejscu, Chrome wygeneruje błąd, ponieważ nie może znaleźć pole, aby pokazać bańki .. Więc moje rozwiązanie jest wyłączenie wyświetlacza : styl none ustawiony przez TinyMCE i zmniejsz rozmiar pola i ukryj jego widoczność. w ten sposób przeglądarka wyświetli dymek obok tego pola, ponieważ pole to znajduje się obok edytora TinyMCE, użytkownik wie, czego brakuje w wymaganym polu.

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

Answer 3

Wziąłem @lucaswxp kod i zmienił go nieco, bo Firefox rzucał błąd (this.is $ nie jest funkcją, jeśli dobrze pamiętam to poprawnie). Również zmienił sposób pożary kod:

$this.tinymce(options); 

do:

tinymce.init(options); 

pełny kod:

$(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); 
}); 

podziękowania dla twórcy, to działało jak zachwytu :)