Stimulus reflex real time validations with simple forms (bootstrap)

applications.scss

/* app/assets/application.scss */

/* real time form validation */

.form-group-valid input {
  border-color: #28a745 !important;
  padding-right: calc(1.5em + .75rem) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right calc(.375em + .1875rem) center !important;
  background-size: calc(.75em + .375rem) calc(.75em + .375rem) !important;
}

.form-group-valid input:focus {
  border-color:#28a745 !important;
  box-shadow:0 0 0 .2rem rgba(40,167,69,.25) !important;
}

.form-group-invalid input  {
    border-color: #dc3545 !important;
    padding-right: calc(1.5em + .75rem) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right calc(.375em + .1875rem) center !important;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem) !important;
}

.form-group-invalid input:focus {
  border-color:#dc3545 !important;
  box-shadow:0 0 0 .2rem rgba(220,53,69,.25) !important;
}

.form-group-invalid .invalid-feedback {
  display: block;
}

new.html.slim

/ app/views/devise/registrations/new.html.slim

.row.justify-content-md-center
  .col.col-md-7.col-lg-5
    .card
      .card-body
        h2.card-title.text-center.mb-4.mt-1 Sign up
        = simple_form_for @user, url: registration_path(resource_name), data: { controller: 'validations'} do |f|
          = f.input :name, input_html: { data: { reflex: "debounced:input", reflex_permanent: true } }
          = f.input :email, input_html: { data: { reflex: "debounced:input", reflex_permanent: true } }
          = f.input :password, input_html: { data: { reflex: "debounced:input", reflex_permanent: true } }
          = f.input :password_confirmation, input_html: { data: { reflex: "debounced:input", reflex_permanent: true } }
          = f.button :submit,\
            class: "btn btn-block rounded-pill #{'btn-primary' if @user.valid?} #{'btn-secondary' if @user.invalid?}",\
            disabled: @user.invalid?
        .separator.text-muted.mt-3.mb-3 or
        .text-center
          = render "devise/shared/links"

registrations_controller.rb

# app/controllers/registrations_controller.rb

class RegistrationsController < Devise::RegistrationsController
  def new
    @user ||= User.new(sign_up_params)
    @user.validate
    @user.errors.messages.reject! { |param, _| sign_up_params[param].blank? }
  end

  private

  def sign_up_params
    return {} unless params.key?(:user)
    params.require(:user).permit(:name, :email, :password, :password_confirmation)
  end

  def account_update_params
    params.require(:user).permit(:name, :email, :password, :password_confirmation, :current_password)
  end
end