I'm having a really hard time validating that all the form fields in my Rails form_for are pleted 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 pleted 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 pleted and throw and error if they're not?

I'm having a really hard time validating that all the form fields in my Rails form_for are pleted 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 pleted 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 pleted and throw and error if they're not?

• javascript
• jquery
• ruby-on-rails
• forms

• Have you searched javascript validation libraries? I've had luck with this one (as long as the validations aren't terribly plex): jqueryvalidation – Helios de Guerra Commented Jul 15, 2014 at 18:58
• Have a look at this sleekd./tutorials/jquery-validation-in-ruby-on-rails – Pavan Commented Jul 15, 2014 at 19:10

4 Answers 4

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 %>

How about :required => true

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

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***
   }

 }
});

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.