Question

我希望在用户提交之前填写所有输入字段。我尝试禁用提交按钮，直到我的输入字段已填写。我还尝试在客户端验证但无法使其工作，代码通过但是即使填写了所有字段，按钮仍未启用。由于某种原因，该按钮继续被禁用。

我的_form.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', :type => "text", :required => "required", :autofocus => true}
        %small#titleHelp.form-text.text-muted 

    .form-group
        = f.input :image,:label => "Image", input_html: { class: 'form-group',"aria-describedby" => "fileHelp", :required => "required", :type => "file",:autofocus => true }

    .form-group
        = f.input :link,:label => "Project Link", input_html: { class: 'form-control', :type => "url", :value => "https://", :required => "required" , :autofocus => true, id:'url-input'}


    .form-group
        = f.input :description,:label => "Description", input_html: { class: 'form-control', :rows => "3", :required => "required" , :autofocus => true, id: 'description'}
        %small#descriptionHelp.form-text.text-muted 


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

我在application.js

中试过这个

$('#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);
  }
});

我觉得我的js由于某种原因没有连接到我的html代码。另外，我想知道是否还有其他方法可以让它在没有JS的情况下工作。

提前谢谢！

Answer 1

对于与表单中的某个字段对应的每个属性，

validates :attribute, presence: true。在没有填写所有字段的情况下仍然可以单击该按钮，但它只会将它们重定向到同一页面，直到它们填满所有字段。您也可以添加自定义消息，如果他们提交而不填写字段，它将告诉他们仍需要填写的内容。然后他们只能在填写完所有字段后继续。

如何在提交之前填写所有输入字段

1 个答案: