Javascript 禁用“提交”按钮，直到输入字段填入RAILS

我想禁用提交按钮，直到我的输入字段被填写完毕。我是rails新手，不太熟悉JS和Coffee，我一直在尝试运行此功能，但它不起作用。我还尝试在客户端进行验证，但无法使其工作，代码通过了，但即使填写了所有字段，按钮仍然没有启用。由于某种原因，该按钮继续被禁用

Html.haml

= simple_form_for @post, html: { multipart: true } do |f|
    - if @post.errors.any?
        #errors
            %h2
                = pluralize(@post.errors.count, "error")
                prevented this Post from saving
            %ul
                - @post.errors.full_messages.each do |msg|
                    %li= msg

    .form-group
        = f.input :title,:label => "Project Name", input_html: { class: 'form-control' }

    .form-group
        %label{:for => "Image"} image
        %input#image.form-control-file{"aria-describedby" => "fileHelp", :type => "file"}/

    .form-group
        %label{:for => "url-input"} Project Link
        %input#url-input.form-control{:type => "url", :value => "https://"}/

    .form-group
        %label{:for => "description"} Description
        %textarea#description.form-control{:rows => "3"}
        %small#descriptionHelp.form-text.text-muted Clear it up please

    %button#add.btn.btn-info{:type => "submit", :disabled => "disabled" } submit

---

提前谢谢

您可以使用javascript或jquery来处理该验证

$('#url-input, #description').on('blur keypress', function() {
  var urlInputLength = $('#url-input').val().length;
  var descriptionInputLength = $('#description').val().length;
  if (urlInputLength == 0 || descriptionInputLength == 0) {
    $('button').prop('disabled',true);
  } else {
    $('button').prop('disabled',false);
  }
});

---

因此，在提交表单之前，确定需要哪些输入元素。使用这些元素添加模糊或按键事件。使用if语句确定按钮是启用还是禁用。如果输入的长度为空0，则可以使用.prop方法禁用按钮元素，或者如果输入中有文本，则启用按钮。

可以使用javascript或jquery处理该验证

$('#url-input, #description').on('blur keypress', function() {
  var urlInputLength = $('#url-input').val().length;
  var descriptionInputLength = $('#description').val().length;
  if (urlInputLength == 0 || descriptionInputLength == 0) {
    $('button').prop('disabled',true);
  } else {
    $('button').prop('disabled',false);
  }
});

---

因此，在提交表单之前，确定需要哪些输入元素。使用这些元素添加模糊或按键事件。使用if语句确定按钮是启用还是禁用。如果输入的长度为空0，则可以使用.prop方法禁用按钮元素，或者如果输入中有文本，则启用按钮。

最初隐藏输入按钮。然后在javascript中编写一个函数，在输入字段的更改事件中显示按钮。最初隐藏输入按钮。然后在javascript中编写一个函数，该函数将在输入字段的更改事件中显示按钮。即使出于某种原因填充了输入，该按钮仍然保持禁用状态！！代码正在传递，但我相信可能是我没有在正确的位置发布JS。因为我仍然不知道是将此代码粘贴到application.js还是posts.coffee中。尽管我两个都试过了，但都没有效果！在%ButtonAd.btn.btn信息{：type=>submit，：disabled=>disabled}提交时删除：disabled=>disabled。在按键和模糊事件之外，禁用按钮$'button'.prop'disabled'，true；。这是jquery，所以只需将其放在application.js中即可。对不起，我不理解这一部分。在按键和模糊事件之外，禁用按钮$'button'。prop'disabled'，true；由于某种原因，即使在填充输入后，按钮仍保持禁用状态！！代码正在传递，但我相信可能是我没有在正确的位置发布JS。因为我仍然不知道是将此代码粘贴到application.js还是posts.coffee中。尽管我两个都试过了，但都没有效果！在%ButtonAd.btn.btn信息{：type=>submit，：disabled=>disabled}提交时删除：disabled=>disabled。在按键和模糊事件之外，禁用按钮$'button'.prop'disabled'，true；。这是jquery，所以只需将其放在application.js中即可。对不起，我不理解这一部分。在按键和模糊事件之外，禁用按钮$'button'。prop'disabled'，true；