CKEditor i pole tekstowe z atrybutem required

Natknąłem się dzisiaj na interesujący problem. Gdy pole tekstowe zostanie zamienione na CKEditor, a ma ustawiony atrybut HTML5 required, nie da się wysłać formularza.

Błąd nie jest najnowszy. Jest o tyle dziwny, że nie pokazuje się żaden komunikat błędu ani inna wskazówka, dzięki której można dojść do sedna sprawy. A sednem sprawy jest… sam CKEditor!

A w zasadzie jego sposób wypełniania pola tekstowego treścią. Otóż CKEditor nie wstawia żadnej treści w pole tekstowe dopóki nie wyślemy formularza. W momencie wysłania, edytorek kopiuje swoją zawartość do pola tekstowego, umożliwiając w ten sposób wysłanie swojej zawartości np. postem. Niestety, walidacja pól HTML5 przeprowadzana jest przez przeglądarkę zanim zdarzenie wysłania formularza zostanie odpalone. W efekcie przeglądarka waliduje pole tekstowe, które jest jeszcze puste.

Walidacja pola z ustawionym atrybutem required zwraca błąd, bo pole jest puste. Niestety, ponieważ CKEditor ukrywa samo pole tekstowe, komunikat o niepoprawnej walidacji również nie jest widoczny. Efekt końcowy jest co najmniej niepokojący: naciskanie przycisku „Wyślij” nie skutkuje absolutnie niczym: strona się nie przeładowuje, formularz się nie wysyła, a przeglądarka nie wysyła żadnego żądania do serwera.

Jest na to pewien sposób. Należy do edytora przypiąć listener, nasłuchujący zdarzenia blur. Jeśli takowe wykryje, należy ręcznie skopiować zawartość edytorka do pola tekstowego:

// zapisujemy edytorek do zmiennej
var editor = CKEDITOR.editor.replace("body");

// przypinamy zdarzenie
editor.on("blur", function() {
    document.getElementById("body")
        .textContent = editor.getData();
});

W ten sposób, za każdym razem, gdy opuścimy edytor, naciskając klawisz TAB lub klikając poza edytorkiem (np. na przycisku „Wyślij”), w pierwszej kolejności odpalone zostanie zdarzenie blur, powodując wykonanie naszego kodu. Poza jakimiś marginalnymi przypadkami powinno to umożliwić prawidłowe wysłanie formularza za każdym razem.


Napisz komentarz


Szukaj wpisów


Chmura tagów