Disable form button until all field are filled out rails 5.1

Question

I have the following form and I looking for a solution to disable the button until the form has all field out. Using Rails 5.1, twitter bootsrap and jquery.

<div class="well">
<%= bootstrap_form_for @dup do |f| %>

<% if current_user.errors.any? %>
          <div id="error_explanation" class="errors">
            <ul>
            <% current_user.errors.full_messages.each do |message| %>
              <li><%= message %></li>
            <% end %>
            </ul>
          </div>
        <% end %>
    <%= f.text_field :title, placeholder: "Title Here...", label: "Title* (Required)" %>
    <%= f.text_field :company_name, placeholder: "Company Name Here...", label: "Company Name* (Required)" %>
    <%= f.text_area :description, placeholder: "Add a description Here...", label: "Description* (Required)" %>
    <%= f.text_field :location, placeholder: "Location Here...", label: "location* (Required)" %>
    <%= f.collection_select :bus_id, Bus.all, :id, :name, include_blank: 'Select A', label: "A* (required)"%>
    <%= f.label "Needed" %>
    <%= f.collection_check_boxes :dup_ids, Dup.all, :id, :name, label: (fa_icon 'cogs-o 2x') %>
    <%= f.fields_for :dups, @g.dups.build do |dups_fields| %>
      <%= skills_fields.text_field :name, label: "add here (Optional)", placeholder: "add here..." %>
    <% end %>
    <%= f.url_field :url, placeholder: "http://...", label: "Url (Optional) - Must start with http://" %>
    <%=  f.hidden_field :company_id, :value => current_user.id unless @job.company_id %>

    <%= form_tag charges_path do %>
      <article>
        <% if flash[:error].present? %>
          <div id="error_explanation">
            <p><%= flash[:error] %></p>
          </div>
        <% end %>
        <label class="amount">
          <span>Amount: <%= pretty_amount(@amount) %></span>
        </label>
      </article>

      <script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
              data-key="<%= Rails.configuration.stripe[:publishable_key] %>"
              data-description="A month's subscription"
              data-amount="<%= @amount %>"
              data-email="<%= current_user.email %>"
              data-locale="auto"></script>
    <% end %>

    <%= f.submit class: "btn btn-primary btn-outline btn-sm" %>
  <% end %>
</div>

Looking for a jquery solution. How can I call the rails form tag fields?

Answer 1

If you add the same class to each of your fields you can count all the fields with that class and only enable the button once all are filled out:

<script type="text/javascript">
    function checkForm() {
      var count = $('.checklist').filter(function() {
        return $(this).val() !== "";
      }).length;

      var total = $('.checklist').length;

      if (count == total) {
        $('.submit-form').removeClass('disabled');
        $('.submit-form').removeAttr('disabled');
          } else {
        $('.submit-form').addClass('disabled');
        $('.submit-form').attr('disabled', 'disabled');
      }
      console.log(count + '/' + total);
    }

    $('.checklist').on('keyup', checkForm);
</script>

<%= f.submit class: "btn btn-primary btn-outline btn-sm submit-form disabled", disabled: true %>

But if some are checkboxes you might have to adjust the count function.