Question

我在RoR应用程序中使用SimpleForm，ClientSideValidations和ClientSideValidations-SimpleForm gems。我可以将表单精美地渲染到模态中，但是当输入失去焦点时，不会进行验证并提交表单。另请注意，我尝试使用此处的修复程序： http://www.ddarrensmith.com/blog/2012/05/17/ruby-on-rails-client-side-validation-with-validation-helpers-and-twitter-bootstrap/

包含表单的视图的片段：

<div class='modal hide' id='New_Discrep' tabindex="-1" role='dialog' aria-labelledby="#New_Discrep_Label" aria-hidden='true'>
  <div class="modal-header">
    <button type='button' class='close' data-dismiss='modal' aria-    hidden='true'>x</button>
    <h3 id="New_Discrep_Label">Create Discrepancy</h3>
  </div>
  <%= simple_form_for @new_discrepancy, :validate => true, :url => {:controller=> 'discrepancy', :action => 'create', :device_id => @device.id} do |f| %>
  <div class='modal-body'>
    <%= f.input :system, :wrapper => :prepend, :label => false do %>
      <%= content_tag :span, 'System', :class => 'add-on input-label' %>
      <%= f.input_field :system %>
    <% end %>
    <%= f.input :description, :wrapper => :prepend, :label => false do %>
      <%= content_tag :span, 'Description', :class => 'add-on input-label' %>
      <%= f.input_field :description, :class => 'textarea' %>
    <% end %>
    <%= f.input :conditions, :wrapper => :prepend, :label => false do %>
      <%= content_tag :span, 'Condiditions', :class => 'add-on input-label' %>
      <%= f.input_field :conditions, :class => 'textarea' %>
    <% end %>
    <%= f.input :dirf, :wrapper => :prepend, :label => false do %>
      <%= content_tag :span, 'Reference', :class => 'add-on input-label' %>
      <%= f.input_field :dirf %>
    <% end %>
  </div>
  <div class='modal-footer'>
    <button type="button" class='btn', data-dismiss='modal', aria-hidden='true'>Cancel</button>
    <%= f.button :submit, :class => 'btn-primary' %>
  </div>
  <% end %>
</div>

我的Gemfile

gem 'rails', '3.2.1'
gem 'jquery-rails'
gem 'carrierwave'
gem 'simple_form'
gem 'client_side_validations'
gem 'client_side_validations-simple_form'

模型

class Discrepancy < ActiveRecord::Base
STATUSES = ['Open', 'Closed', 'Rejected']

  belongs_to :device
  belongs_to :user
  has_many :parts
  has_many :updates

  validates :date_entered, :presence => true
  validates :status, :presence => true
  validates :description, :presence => true
  validates :system, :presence => true
  validate :close_date

  validates_inclusion_of :status, :in => STATUSES, 
    :message => "must be one of: #{STATUSES.join(', ')}"  

end

application.js文件

//= require jquery
//= require jquery_ujs
//= require rails.validations
//= require rails.validations.simple_form
//= require_tree .

我还确认脚本标签是在表单正下方的html中生成的。谢谢你的帮助！

Answer 1

所有逻辑都应用于具有可见输入的表单。由于您的输入在页面加载时不可见，因此不会附加任何事件。

以下对我有用：

$('#myModal').on('shown', function () {
  $(ClientSideValidations.selectors.forms).validate();
});

Answer 2

README实际上详细说明了一个更具体的功能：

$(new_form).enableClientSideValidations();

https://github.com/bcardarella/client_side_validations#enabling

Answer 3

在较新的引导版本上：

$('#myModal').on('shown.bs.modal', function () {
  $(ClientSideValidations.selectors.forms).validate();
});

SimpleForm + ClientSideValidations + bootstrap - 表单上没有验证 - 所有输入都被接受

3 个答案: