SimpleForm+ClientSideValidations+bootstrap - 表单上没有进行验证 - 所有输入都被接受 [英] SimpleForm+ClientSideValidations+bootstrap - Validation is not occuring on the form- all inputs are accepted

问题描述

我在 RoR 应用程序中使用 SimpleForm、ClientSideValidations 和 ClientSideValidations-SimpleForm gem.我可以将表单精美地渲染到模态中，但是当输入失去焦点时，不会发生验证并提交表单.另请注意，我已尝试使用此处找到的修复程序: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">创建差异</h3>

<%= simple_form_for @new_discrepancy, :validate =>真，:url =>{:控制器=>'差异', :action =>'创建', :device_id =>@device.id} 做 |f|％＞

<%= f.input :system, :wrapper =>:prepend, :label =>假做%><%= content_tag :span, 'System', :class =>'附加输入标签'%><%= f.input_field :system %><%结束%><%= f.input :description, :wrapper =>:prepend, :label =>假做%><%= content_tag :span, 'Description', :class =>'附加输入标签'%><%= f.input_field :description, :class =>'文本区域'%><%结束%><%= f.input :conditions, :wrapper =>:prepend, :label =>假做%><%= content_tag :span, '条件', :class =>'附加输入标签'%><%= f.input_field :conditions, :class =>'文本区域'%><%结束%><%= f.input :dirf, :wrapper =>:prepend, :label =>假做%><%= content_tag :span, 'Reference', :class =>'附加输入标签'%><%= f.input_field :dirf %><%结束%>

<button type="button" class='btn', data-dismiss='modal', aria-hidden='true'>取消</button><%= f.button :submit, :class =>'btn-主要'%>

<%结束%>

我的 Gemfile

gem 'rails', '3.2.1'宝石'jquery-rails'宝石载波"宝石'simple_form'宝石'client_side_validations'宝石'client_side_validations-simple_form'

型号

类差异真的验证 :status, :presence =>真的验证 :description, :presence =>真的验证 :system, :presence =>真的验证:close_datevalidates_inclusion_of :status, :in =>状态，:消息 =>必须是以下之一:#{STATUSES.join(', ')}"结尾

application.js 文件

//= 需要 jquery//= 需要 jquery_ujs//= 需要 rails.validations//= 需要 rails.validations.simple_form//= require_tree .

我还确认脚本标记是在表单正下方的 html 中生成的.感谢您的帮助！

解决方案

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

以下对我有用:

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

I am using the SimpleForm, ClientSideValidations, and ClientSideValidations-SimpleForm gems in a RoR application. I can render the form into the modal beautifully, however when the input loses focus no validation occurs and the form is submitted. Also note that I have tried using the fix found here: http://www.ddarrensmith.com/blog/2012/05/17/ruby-on-rails-client-side-validation-with-validation-helpers-and-twitter-bootstrap/

Segment of the view containing the form:

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

My Gemfile

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

Model

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 file

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

I have also confirmed that the script tag is being produced in the html directly below the form. Thanks for the help!

解决方案

All the logic gets applied to forms with visible inputs. Since your inputs are not visible on page load, no events are attached.

The following worked for me:

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

这篇关于SimpleForm+ClientSideValidations+bootstrap - 表单上没有进行验证 - 所有输入都被接受的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！