Schaltfläche "Senden" deaktivieren, bis die Eingabefelder RAILS ausgefüllt wurden

Question

Ich möchte die Schaltfläche "Senden" deaktivieren, bis meine Eingabefelder ausgefüllt wurden. Ich bin neu bei Schienen und nicht so sehr bei JS und Kaffee. Ich habe versucht, diese Funktion auszuführen aber es geht nicht zur Arbeit. Ich habe auch versucht, auf Client-Seite zu validieren, aber konnte es nicht funktionieren, der Code übergibt, aber die Schaltfläche ist immer noch nicht aktiviert, auch wenn alle Felder ausgefüllt sind. Die Schaltfläche wird aus bestimmten Gründen weiterhin deaktiviert.

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 

Vielen Dank im Voraus.

Answer 1

Sie können Javascript oder jquery verwenden, um diese Überprüfung zu verarbeiten.

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

So bestimmen Sie, welche Eingabeelement (e) erforderlich sind, bevor das Formular gesendet werden kann. Verwenden Sie diese Elemente, um ein Ereignis blur oder keypress hinzuzufügen. Verwenden Sie eine if-Anweisung, um festzustellen, ob die Schaltfläche aktiviert oder deaktiviert ist. Wenn die Länge der Eingabe leer ist (0), können Sie das Schaltflächenelement mithilfe der Methode .prop() deaktivieren. Wenn die Eingabe Text enthält, aktivieren Sie die Schaltfläche.