Rails JQuery 在模态内验证而不是触发

Question

我已经成功地让 JQuery 表单验证在页面的常规正文中正常工作，但是，当我尝试在模式框中进行验证时，JQuery 没有开火。

模态部分：

<div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h4 class="modal-title">New Account</h4>
        </div>
        <div class="modal-body" id = "addClientForm">
          <%= simple_form_for @client, :remote => true, :html => { :id => "addClientForm"} do |f| %>
            <div>    
              <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                <%= f.input :company_name %>
              </div>  
               <%= f.button :submit %>
            </div>
            <div class="clearfix">
            </div>
          <% end %>
        </div>
      </div>
    </div>                      
  </div>

脚本： 当我将表单放在模式之外时，我使用 $(document).ready( function () { 而不是 $("#myModal").on("shown.bs.modal", function () {。然而，文件。 ready 在模态内对表单不起作用。

 <script>
      $("#myModal").on("shown.bs.modal", function () {
        $("#addClientForm").validate({
          rules: {
            "client[company_name]": {
              required: true
            }
          },
          messages: {
            "client[company_name]": {
              required: "Company Name is a required field."
            }
          }
      });
    } );
</script>

型号：

class Client < ActiveRecord::Base
  validates :company_name, presence: true

  has_many :quotes
  has_many :current_plans 
end

终端输出： 当 JQuery 正确触发时，我在终端中没有收到任何反馈，并且验证显示。当 JQuery 没有触发时，我得到：在 2015-08-19 18:16:54 +0000 开始 POST 66.186.164.130 的“/clients” 由 ClientsController 处理#create as JS

  Parameters: {"utf8"=>"✓", "client"=>{"company_name"=>""}, "commit"=>"Create Client"}
   (30.5ms)  BEGIN
   (30.5ms)  ROLLBACK
   (30.8ms)  SELECT COUNT(*) FROM "clients"
   (30.6ms)  SELECT COUNT(*) FROM "quotes"
  Rendered clients/_client_table.html.erb (0.1ms)
  Rendered clients/_newClientModal.html.erb (15.3ms)
  Rendered clients/home.html.erb (82.0ms)
Completed 200 OK in 152ms (Views: 25.2ms | ActiveRecord: 122.4ms)

application.js:

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require jquery-ui/datepicker
//= require best_in_place
//= require best_in_place.jquery-ui
//= require moment
//= require bootstrap-datetimepicker
//= require pickers
//= require jquery.validate
//= require jquery.validate.additional-methods
//= require dataTables/jquery.dataTables
//= require dataTables/bootstrap/3/jquery.dataTables.bootstrap
//= require dataTables/jquery.dataTables
//= require dataTables/extras/dataTables.tableTools
//= require twitter/bootstrap
//= require turbolinks
//= require bootstrap3-editable/bootstrap-editable
//= require_tree .

如果您需要任何进一步的信息，请告诉我。谢谢！

Answer 1

尝试更改资产的顺序，使 turbolinks 成为文件中的最后一项：

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require jquery-ui/datepicker
//= require best_in_place
//= require best_in_place.jquery-ui
//= require moment
//= require bootstrap-datetimepicker
//= require pickers
//= require jquery.validate
//= require jquery.validate.additional-methods
//= require dataTables/jquery.dataTables
//= require dataTables/bootstrap/3/jquery.dataTables.bootstrap
//= require dataTables/jquery.dataTables
//= require dataTables/extras/dataTables.tableTools
//= require twitter/bootstrap
//= require bootstrap3-editable/bootstrap-editable
//= require_tree .
//= require turbolinks

我知道你说你没有使用 torbolinks，但我的 select2 和 fuelux 向导的 JS 代码有问题（显然与 turbolinks 无关），并且进行此更改解决了它。

Answer 2

经过大量的反复试验 - 我从模态主体 div 中删除了 id = addClientForm，并且 JQuery 验证有效。不知道为什么它首先在那里，但它引起了很多头痛。

Rails JQuery 在模态内验证而不是触发

Rails JQuery Validate within Modal not Firing

jquery

modal-dialog

simple-form

ruby-on-rails-4