Question

我想要禁用提交按钮，直到我的输入字段被填写。我是新手，而不是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()方法禁用按钮元素，或者如果输入中有文本，则启用按钮。

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

1 个答案: