Char limit caption

app/javascript/components/caption-input.js

@@ -0,0 +1,20 @@
+function setCount() {
+  const $input = $('.caption-input');
+  const $message = $('.caption-input-msg');
+  const max = $input.attr('maxlength');
+  const count = $input.val().length;
+
+  $message.text(`${count} / ${max}`);
+}
+
+document.addEventListener('turbolinks:load', function() {
+  const $input = $('.caption-input');
+
+  if ($input.length === 0) {
+    return;
+  }
+
+  setCount();
+
+  $input.on('keyup', setCount);
+});

app/javascript/components/index.js

@@ -1,3 +1,4 @@
 // Add any components to this file
 
+require('./caption-input');
 require('./payment-form');

app/models/postcard.rb

@@ -8,6 +8,11 @@ class Postcard < ApplicationRecord
 
   enum status: %i[pending processing mailed in_transit delivered]
 
+  validates :caption, length: {
+    maximum: 200,
+    too_long: '200 characters is the maximum allowed'
+  }
+
   PRICE = 295
 
   def lob_description

app/views/builder/caption.html.erb

@@ -21,11 +21,16 @@
     </div>
 
     <div class="col-md-6">
-      <%= form_with model: @postcard, class: 'p-4', url: update_caption_path(@postcard), local: true do |form| %>
+      <%= form_with model: @postcard, class: 'p-4', url: update_caption_path(@postcard), local: true do |f| %>
         <div class="form-group">
-          <label>Caption</label>
-          <%= form.text_area :caption, class: 'form-control', cols: 30, rows: 7, placeholder: 'Message' %>
+          <%= f.label :caption %>
+          <%= f.text_area :caption, class: 'form-control caption-input', maxlength: 200, cols: 30, rows: 7, placeholder: 'Message' %>
+          <div class="invalid-feedback">
+            <%= @postcard.errors.full_messages.first %>
+          </div>
+          <small class="form-text text-muted caption-input-msg"></small>
         </div>
+
         <div class="form-group">
           <input type="submit" value="Next" class="btn btn-primary py-3 px-5">
         </div>

config/initializers/customize_errors.rb

@@ -0,0 +1,9 @@
+ActionView::Base.field_error_proc = proc do |html_tag, _instance|
+  class_attr_index = html_tag.index 'class="'
+
+  if class_attr_index
+    html_tag.insert class_attr_index + 7, 'is-invalid '
+  else
+    html_tag.insert html_tag.index('>'), ' class="is-invalid"'
+  end
+end