¿Cómo puedo agregar la validación del lado del cliente en este formulario? Estoy usando una gema de diseño.

 <h2>Sign up</h2> <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %> <%= render "devise/shared/error_messages", resource: resource %> <div class ="field"> <%= f.label :first_name %><br> <%= f.text_field :first_name, placeholder: 'Enter your First name'%> </div> <div class ="field"> <%= f.label :last_name %><br> <%= f.text_field :last_name, placeholder: 'Enter your last name'%> </div> <div class ="field"> <%= f.label :user_name %><br> <%= f.text_field :user_name %> </div> <div class="field"> <%= f.label :email %><br /> <%= f.email_field :email, autofocus: true, autocomplete: "email" %> </div> <div class="field"> <%= f.label :password %> <% if @minimum_password_length %> <em>(<%= @minimum_password_length %> characters minimum)</em> <% end %><br /> <%= f.password_field :password, autocomplete: "new-password" %> </div> <div class="field"> <%= f.label :password_confirmation %><br /> <%= f.password_field :password_confirmation, autocomplete: "new-password" %> </div> <%= f.label :role %> <%= f.select :role, User.roles.keys %> <div class ="field"> <%= f.label :Address %><br> <%= f.text_field :Address, placeholder: 'Enter your complete address' %> </div> <div class ="field"> <%= f.label :city %><br> <%= f.text_field :city %> </div> <div class ="field"> <%= f.label :postal_code %><br> <%= f.text_field :postal_code, placeholder: 'Enter your postal code in digit' %> </div> <div class="actions"> <%= f.submit "Sign up", data: {turbo: false} %> </div> <% end %> <%= render "devise/shared/links" %>

Agregué la gema client_side_validation pero no funciona. Necesito ayuda para resolver este problema. Necesito resolver este problema. Intenté algo de la validación, pero falló. ¿Alguien puede guiarme?