Rails7 stimulusを使用してフォームにバリデーションをかける

$ bundle exec rails stimulus:install

$ rails generate stimulus FormValidation

// app/javascript/controllers/form_validation_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["email", "password", "emailError", "passwordError"]

  validate() {
    this.clearErrors();
    
    let isValid = true;

    if (!this.emailTarget.value.includes("@")) {
      this.emailErrorTarget.textContent = "Invalid email address";
      isValid = false;
    }

    if (this.passwordTarget.value.length < 6) {
      this.passwordErrorTarget.textContent = "Password must be at least 6 characters long";
      isValid = false;
    }

    if (isValid) {
      this.element.submit();
    }
  }

  clearErrors() {
    this.emailErrorTarget.textContent = "";
    this.passwordErrorTarget.textContent = "";
  }
}

<!-- app/views/welcome/index.html.erb -->
<h1>Sign Up</h1>

<form data-controller="form-validation" data-action="submit->form-validation#validate">
  <div>
    <label for="email">Email:</label>
    <input id="email" type="text" data-form-validation-target="email">
    <span data-form-validation-target="emailError" class="error"></span>
  </div>

  <div>
    <label for="password">Password:</label>
    <input id="password" type="password" data-form-validation-target="password">
    <span data-form-validation-target="passwordError" class="error"></span>
  </div>

  <button type="submit">Sign Up</button>
</form>

# config/routes.rb
Rails.application.routes.draw do
  root 'welcome#index'
end

$ rails s -b 0.0.0.0