Stimulus with Turbolinks, select2 and formValidation
Tags: stimulus, select2, formvalidation, turbolinks
Published: 2018-02-03 23:14:08

---
title: Stimulus with Turbolinks, select2 and formValidation
published: true
description: The before and after of implementing select2 and formValidation with Stimulus and Turbolinks
tags: stimulus, select2, formValidation, turbolinks
---
# Goal
Show the before and after implementation of [select2](https://select2.org/)/[formValidation](http://formvalidation.io/)/[Turbolinks](https://github.com/turbolinks/turbolinks) with the new modest js framework named [stimulus](https://stimulusjs.org/)

I am utilizing Rails as my framework here, but the setup really isn't about the framework.  However, this demonstrates a good use case of server side rendered html without frontend framework separation.

I'll break this down into 2 steps:
* Implementation without Stimulus
* Implementation with Stimulus

# Implementation without Stimulus

To accomplish this part I created a [simple project](https://github.com/dstull/stimulus-formvalidation/tree/without-stimulus).  There are 2 files that are involved:

## [Erb File](https://github.com/dstull/stimulus-formvalidation/blob/without-stimulus/app/views/cars/_form.html.erb)

In this file I am following the [declarative/html5 data attributes](http://formvalidation.io/examples/attribute/) way of using FormValidation as I prefer to keep the javascript as generic as possible.

## [CoffeeScript file](https://github.com/dstull/stimulus-formvalidation/blob/without-stimulus/app/assets/javascripts/cars.coffee)

Here I am demonstrating:
* Select2 with normal, multiple, and tags with createTag as a way to constrain allowable input
* FormValidation on Select2
* FormValidation with custom callback on name field
* FormValidation using revalidation and hidden input change when select2 change event is triggered
* Removing Select2 from DOM before Turbolinks caches the page, which keeps double Select2's from showing up in the page

# Implementation with Stimulus

To accomplish this part I utilized the [master branch](https://github.com/dstull/stimulus-formvalidation/tree/master). [This](https://github.com/dstull/stimulus-formvalidation/commit/1739fc0ae05a739a6b4a3cb77c547085209c819f) commit shows the diff of the conversion. Final demo app can be found [here](https://stimulus-formvalidation.herokuapp.com/cars).

There are 3 files that are involved:

## [Erb File](https://github.com/dstull/stimulus-formvalidation/blob/master/app/views/cars/_form.html.erb)

The notable changes here to notice are the utilization of the data attributes of target, controller, and placeholder.

## [Application JS file](https://github.com/dstull/stimulus-formvalidation/blob/master/app/javascript/packs/application.js)

Not much to say about this file, as it is the basic wiring needed as the entry-point for Stimulus use.

## [Cars Controller JS file](https://github.com/dstull/stimulus-formvalidation/blob/master/app/javascript/controllers/cars_controller.js)

Here I am demonstrating:
* Conversion into Stimulus from original CoffeeScript
* Additional storing of the selected items so they are preserved on forward and back buttons

# Conclusions

I really like how this gives an easy way to leverage data attributes and hook easily into Javascript.  While I didn't show it here, but will in another blog, Stimulus really shines when you can use it to describe the event handlers in the data attributes instead of having to deal with them in JavaScript.

I'd encourage people to give it a look.  As can be seen here, you can easily hook into existing jquery libraries using it.

Thanks to [this repo](https://github.com/pascallaliberte/stimulus-turbolinks-select2) for getting me past a few initial humps.