禁用提交按钮，直到所有表单输入在 Rails 中都有值答案

【问题标题】：disable submit button until all form inputs have a value in Rails禁用提交按钮，直到所有表单输入在 Rails 中都有值
【发布时间】：2021-11-07 11:15:07
【问题描述】：

我想禁用表单提交按钮，直到所有输入都有值。我的观点有这些输入：

  <%= form_for @item, html: { enctype: "multipart/form-data", id: "upload-data" } do |f| %>
   <%= f.text_field :name %>
  <% end %>

然后我在每个 keyup 事件中运行这个 validate() 函数：

$(document).ready(function() {
  validate();
  $('input').on('keyup', validate);
});

function validate() {
  var input = $('input');
  var isValid = false;
  $.each(input, function(k, v) {
    if (v.type != "submit") {
      isValid = (k == 0) ?
        v.value ? true : false : isValid && v.value ? true : false;
    }
    if (isValid) {
      $("input[type=submit]").prop("disabled", false);
    } else {
      $("input[type=submit]").prop("disabled", true);
    }
  });
}

虽然相同的代码可以工作here，但它在我的 Rails 视图中不起作用。它保持禁用状态。我忽略了什么？

【问题讨论】：

可能是因为 Rails 中的 turbolinks，您不能只是复制粘贴需要将其调整为 turbolinks 脚本和语法的 javascript，试试这个 $(document).on('ready turbolinks:load', function() {}); 而不是 $(document).ready(function() {});
您能否添加更多细节，例如您将 javascript 和 html 页面源代码放在哪里？
javascript 在 Rails 5.2.4 的旧 app/assets/javascript 目录中，页面源在 app/views/items/new 中
为什么不直接使用 HTML5 验证？ developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation

标签： javascript ruby-on-rails

【解决方案1】：

可能是因为 turbolinks，在 Rails 中你不能只是复制粘贴你需要的 javascript 来适应 turbolinks 脚本和语法

你可以尝试改变你的脚本

$(document).ready(function() {

});

进入

$(document).on('ready turbolinks:load', function() {

})

【讨论】：

还是不行。知道如何解决这个问题吗？
脚本加载了吗？您可以通过将 console.log("loaded") 放在括号内来尝试
脚本确实在加载，问题是它在页面加载时触发一次，然后再也不会触发