如何在客戶端完全驗證Rails form_for？

Question

我很難驗證在允許將表單提交到后端之前，我的Rails form_for中的所有表單字段都已完成。 在背面，模型檢查所有屬性的存在，但是在正面，我需要警告用戶是否尚未填寫字段。 形式如下：

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

我遇到的問題是弄清楚如何向表單發送錯誤的布爾值，以便它將阻止表單的發送。 每當我嘗試使用onSubmit或onclick動作時，它無論如何都會提交並忽略假布爾值。 有人可以告訴我如何檢查表單字段中的name_input，price和description來確保它們完成，如果沒有則拋出錯誤。

Answer 1

如果我正確理解您的信息，則應在jQuery提交處理程序函數中嘗試使用“ event.preventDefault（）”：

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

但是對於簡單的狀態檢查，我只將html'required'添加到這樣的輸入字段中：

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

您可以使用jQuery將聚焦或綁定綁定到每個字段。 從那里，您可以向Rails控制器發出AJAX請求，以提取您要驗證的值。

例：

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

 }
});

Answer 4

在輸入所有必需信息之前，禁用JavaScript中的“提交”按鈕即可。 只是以某種方式向用戶指示信息丟失，一旦輸入內容，就啟用按鈕。