как сделать все поля ввода заполнены перед отправкой

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 для каждого из атрибутов, соответствующих одному из ваших полей в форме. Кнопка будет по-прежнему доступна без всех заполненных полей, но она просто перенаправит их на одну страницу, пока они не заполнит все поля. Вы можете добавлять собственные сообщения, поэтому, если они отправляются без заполнения полей, они будут сообщать им, что им еще нужно заполнить. Затем они могут двигаться только после заполнения всех полей.