禁用表单按钮，直到所有字段都填写完 rails 5.1

Posted 2023-05-08

【中文标题】禁用表单按钮，直到所有字段都填写完 rails 5.1

【英文标题】：Disable form button until all field are filled out rails 5.1

【发布时间】：2018-01-22 19:53:39

【问题描述】：

我有以下表格，我正在寻找一种解决方案来禁用按钮，直到表格中的所有字段都消失。使用 Rails 5.1、twitter bootsrap 和 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>

寻找 jquery 解决方案。如何调用rails表单标签字段？

【问题讨论】：

查看验证插件：***.com/a/18754780/559079

【参考方案1】：

如果您为每个字段添加相同的类，您可以计算该类的所有字段，并且只有在全部填写后才启用按钮：

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

但如果有些是复选框，您可能需要调整 count 函数。

【讨论】：

有些是复选框和集合。如何将课程添加到例如to ` `?