form_for - Remove class on f.submit when all required fields are filled with javascript

Viewed 17

I have a form built with form_for in which some of the fields are required. I would like to remove a class (.disabled-button), using javascript and without Jquery, from the f.submit once the required fields are filled. Is it possible?

      <div class="form-field">
        <%= f.label :first_name, t('user_invitations.attributes.first_name.label') %>
        <%= f.text_field :first_name, class:"form-input", required: true, minlength: 3,
      </div>

      <div class="form-field">
        <%= f.label :last_name, t('user_invitations.attributes.last_name.label') %>
        <%= f.text_field :last_name, class:"form-input", required: true, minlength: 3,
      </div>
    </div>
    
    <div class="form-field">
      <%= f.label :password, t('user_invitations.attributes.password.label') %>
      <%= f.password_field :password,
                           class:"form-input",
                           autocomplete: "off",
                           required: true,
                           minlength: 8,
                           data: { 'toggle-visibility': true },
      %>
    </div>

    <div class='field text-left ml-20'>
      <div class="checkbox">
        <%= f.check_box :accepted_terms, required: true %>
        <%= f.label :accepted_terms, t('sign_up.attributes.terms_html'), required: true, class:'pl-0' %>
        <%= f.error_message :accepted_terms %>
      </div>
    </div>
  </div>

  <div class="text-right mt-40">
    <%= f.submit t('user_invitations.form.submit'), 
                 class: "button button--primary disabled-button",
    %>
  </div>
0 Answers
Related