如何在客户端完全验证Rails form_for？

Question

I'm having a really hard time validating that all the form fields in my Rails form_for are completed before the form is allowed to be submitted to the backend. On the back the model checks for the presence of all the attributes, but on the front I need to alert the user if they haven't completed a field. Here's the form:

<h1>List an item for sale</h1>
<%= form_for Product.new, :options => {:id => "new_listing"}, :url => {:action => "create"}, :html => {:multipart => true} do |f| %>
  <div><%= f.label :name %><br />
    <%= f.text_field :name, :id => "name_input", :autofocus => true, :placeholder => "Name yourself" %>
  </div>
  <div><%= f.label :price %><br />
    <%= f.number_field :decimal_price, :step => 'any', :placeholder => "Name your price" %>
  </div><br />
  <div><%= f.label :description %><br />
    <%= f.text_area :description, :cols => "50", :rows => "10", :placeholder => "Write a few sentences about the item you're listing. Is it in good condition? Are there any accessories included?" %>
  </div>
  <div>
    <%= f.label "Add a photo (increases your likelihood of selling)" %><br />
    <%= f.file_field :photo %>
  </div>
  <br />
  <div>
    <%= f.label "Category" %><br />
    <%= f.collection_select :category_id, Category.all, :id, :name, :prompt => 'Choose a category' %>
  </div><br />
  <%= f.submit "List!" %>
<% end %> 

The problem I've run into is figuring out how to send a false boolean value to the form so that it will stop the form from being sent. Every time I've tried using onSubmit or onclick actions it just submits anyway and ignores the false boolean. Can someone show me how to check the form fields for name_input, price, and description to ensure they're completed and throw and error if they're not?

Answer 1

If i understand you correctly... you should try to use 'event.preventDefault()' in your jQuery submit handler function:

 $( "#your-product-form-id" ).submit(function( event ) {
      if( your_validation_function() )
        return;
      else event.preventDefault();
    });

But for simple presence check I would add just html 'required' to input fields like this:

<%= f.text_field :name, :id => "name_input", :required => true %>

Answer 2

怎么样:required => true

<%= f.text_field :name, :id => "name_input", :autofocus => true, :placeholder => "Name yourself", required => true %>

Answer 3

You could use jQuery to bind a focusout or a keyup to each of the fields. From there, you can make an AJAX request to your Rails controller to pull the values you wish to verify against.

Example:

$("#name-input").focusout(function(){
  $.ajax({
   type: "GET",
   dataType "JSON",
   url: "insert_path_here"
   success: function(data){
     **INSERT VALIDATION CODE HERE***
   }

 }
});

Answer 4

Disabling the submit button in JavaScript until all of the required information has been entered would work. Just somehow indicate to the user that information is missing and once something has been entered enable the button.