webshim icon indicating copy to clipboard operation
webshim copied to clipboard

Webshims form user-* classes do not apply when using Turbolinks

Open akshayrawat opened this issue 11 years ago • 1 comments
trafficstars

When navigating to a page through Turbolinks (with Rails), the form fields which fail validation do not get the .user-error class. The validation message popup however shows up as expected on non polyfilled browsers (demonstrating that the actual input polyfill works).

The only special code to make Webshims work with Turbolinks is

$(document).on('page:load', function () {
    $(this).updatePolyfill()
});

This makes the form validation polyfills work on all pages, however the user-* classes do not get applied. Also the events changedinvalid, changedvalid do not get fired.

Demo: Here you'll see that the .user-error class (styled with a red border) shows up on the first page but not the second (transitioned through Turbolinks). Also if the second page is refreshed, the error styles start working.

Versions: Webshim-1.15.4, Turbolinks 2.4.0.

This question was also asked here.

akshayrawat avatar Nov 01 '14 11:11 akshayrawat

The reason for this is, that turbolinks removes the body element, not only its content and some events are bound to the body. While I can change this in your particular case, there are still other events bound to body, that I can't change this easy. Is there a way to configure turbolinks to change the content of the body and not the body itself?

aFarkas avatar Nov 03 '14 16:11 aFarkas