How i can add client side validation in this form i am using devise gem

    <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" %>

I added gem client_side_validation but it's not working I need help to resolve this problem i need to solve this problem I try some of the validation but it is failed can any body guide me