2017-01-06 2 views
0

Я хочу, чтобы все поля ввода заполнялись до того, как пользователь отправил их. Я попытался отключить кнопку отправки до тех пор, пока поля ввода не будут заполнены. Я также попытался проверить на стороне клиента, но не смог заставить его работать, код проходит, но кнопка все еще не включена, даже когда все поля заполняются. По какой-то причине кнопка по-прежнему отключена.как сделать все поля ввода заполнены перед отправкой

Мой _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.

Спасибо заранее!

+0

Вы также можете поделиться своим сгенерированным html? – Deep

+0

Попробуйте запустить код внутри функции 'on ('blur keypress')' в консоли браузера. Это облегчит вам отладку. – Abhi

+0

Используйте https://jqueryvalidation.org/, очень сложную, чистую структуру для настраиваемых правил проверки. –

ответ

0

validates :attribute, presence: true для каждого из атрибутов, соответствующих одному из ваших полей в форме. Кнопка будет по-прежнему доступна без всех заполненных полей, но она просто перенаправит их на одну страницу, пока они не заполнит все поля. Вы можете добавлять собственные сообщения, поэтому, если они отправляются без заполнения полей, они будут сообщать им, что им еще нужно заполнить. Затем они могут двигаться только после заполнения всех полей.

+0

Можете ли вы показать мне, где добавить это в 'application.js'? Я был бы признателен – hekmat

+0

Вы бы фактически добавили его в свою модель 'Post', а не включали в' application.js'. Всегда позволяйте вашим моделям обрабатывать проверки, а не пытаться сделать javascript. – LBarry

+0

Отлично !!! Это действительно помогло, спасибо! – hekmat