禁用“提交”按鈕，直到“輸入”字段中填寫了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()方法禁用按鈕元素，或者如果輸入中包含文本，則啟用按鈕。