javascript erb 90 lines · 2 tabs

Form validation with Stimulus and server-side errors

Jordan Lee Jan 2026

2 tabs

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["field"]

  validateField(event) {
    const field = event.target
    const errorElement = field.parentElement.querySelector('.field-error')

    if (!field.checkValidity()) {
      field.classList.add('field-invalid')
      field.classList.remove('field-valid')

      if (errorElement) {
        errorElement.textContent = field.validationMessage
        errorElement.classList.remove('hidden')
      }
    } else {
      field.classList.remove('field-invalid')
      field.classList.add('field-valid')

      if (errorElement) {
        errorElement.classList.add('hidden')
      }
    }
  }

  validateForm(event) {
    let isValid = true

    this.fieldTargets.forEach(field => {
      if (!field.checkValidity()) {
        isValid = false
        field.dispatchEvent(new Event('blur'))
      }
    })

    if (!isValid) {
      event.preventDefault()

      // Focus first invalid field
      const firstInvalid = this.element.querySelector('.field-invalid')
      if (firstInvalid) firstInvalid.focus()
    }
  }
}

<%= form_with model: @post,
    data: {
      controller: "form-validation",
      action: "submit->form-validation#validateForm"
    } do |f| %>

  <div class="form-group">
    <%= f.label :title %>
    <%= f.text_field :title,
        required: true,
        minlength: 5,
        maxlength: 100,
        class: "form-input",
        data: {
          form_validation_target: "field",
          action: "blur->form-validation#validateField"
        } %>
    <% if @post.errors[:title].any? %>
      <div class="field-error"><%= @post.errors[:title].first %></div>
    <% else %>
      <div class="field-error hidden"></div>
    <% end %>
  </div>

  <div class="form-group">
    <%= f.label :body %>
    <%= f.text_area :body,
        required: true,
        minlength: 50,
        rows: 8,
        class: "form-input",
        data: {
          form_validation_target: "field",
          action: "blur->form-validation#validateField"
        } %>
    <% if @post.errors[:body].any? %>
      <div class="field-error"><%= @post.errors[:body].first %></div>
    <% else %>
      <div class="field-error hidden"></div>
    <% end %>
  </div>

  <%= f.submit "Save", class: "btn btn-primary" %>
<% end %>

2 files · javascript, erb Explain with highlit

Client-side validation provides instant feedback, but server-side validation is the source of truth. I use Stimulus to add real-time validations (format, length, required fields) while still rendering server errors when validations fail on submit. The controller checks validity on blur or input events and shows inline error messages. When the form submits and the server returns errors, I render the form again with Turbo and error messages appear automatically. The progressive enhancement approach means forms work without JavaScript, but JavaScript makes them feel responsive. I also use the Constraint Validation API to tap into native browser validation and customize error messages.

Related snips

ruby

class CommentsController < ApplicationController
  before_action :set_post

  def create
    @comment = @post.comments.build(comment_params)

System test: asserting Turbo Stream responses

rails hotwire turbo

by codesnips 4 tabs

ruby

class Post < ApplicationRecord
  belongs_to :author, class_name: 'User'
  has_many :comments, dependent: :destroy

  scope :published, -> { where.not(published_at: nil).where('published_at <= ?', Time.current) }
  scope :draft, -> { where(published_at: nil) }

ActiveRecord scopes for reusable query logic

rails activerecord patterns

by Alex Kumar 1 tab

ruby

module Api
  module V1
    class UsersController < BaseController
      def show
        user = User.includes(:profile).find(params[:id])

ETags for conditional requests and caching

rails caching http-caching

by Alex Kumar 1 tab

ruby

class PostsController < ApplicationController
  def index
    @posts = Post.includes(:author)
                 .order(created_at: :desc)
                 .page(params[:page])
                 .per(10)

Turbo Frames: infinite scroll with lazy-loading frame

rails turbo hotwire

by codesnips 4 tabs

ruby

require "csv"

class PeopleCsvStream
  include Enumerable

  HEADERS = %w[id full_name email signed_up_at plan].freeze

Resilient CSV Export as a Streamed Response

rails performance streaming

by codesnips 3 tabs

erb

<form data-controller="query-sync" data-action="change->query-sync#apply">
  <select name="status" class="rounded border p-2">
    <option value="">Any</option>
    <option value="open">Open</option>
    <option value="closed">Closed</option>
  </select>

Filter UI that syncs query params via Stimulus (no front-end router)

rails hotwire stimulus

by Henry Kim 2 tabs

Share this code

Here's the card — post it anywhere.

Form validation with Stimulus and server-side errors — share card

Link copied