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

Question

我想禁用提交按钮，直到我的输入字段被填写。我是 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

提前致谢。

Answer 1

您可以使用 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);
  }
});

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