Rails 5 client_side_validation 在模态下不起作用答案

【问题标题】：Rails 5 client_side_validation not working on modalRails 5 client_side_validation 在模态下不起作用
【发布时间】：2018-06-21 03:47:15
【问题描述】：

我正在使用 gem 'client_side_validations' 和 gem 'client_side_validations-simple_form' 和所有验证在正常形式下都可以正常工作，但在尝试适应引导模式时不起作用，这是我在模式中的形式：

<div class="modal-content" id="modal_usuario">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

</div>
 <div class="modal-body">
 <%= simple_form_for(@usuario, html: {class: "miform form-horizontal"}, validate: true) do |f| %>
 <h4>Nuevo Usuario</h4>
 <%= f.error_notification %>

  <div class="form-group">
    <%= f.label :usuario, class: "col-sm-4" %>
    <%= f.text_field :usuario, class: "col-sm-5" %>
  </div>

  <div class="form-group">
  <%= f.label :password, class: "col-sm-4" %>
  <%= f.password_field :password, class: "col-sm-5" %>
</div>
<div class="form-group">
   <%= f.label :password_confirmation, "Confirmar contraseña", class: "col-sm-4" %>
    <%= f.password_field :password_confirmation, class: "col-sm-5" %>
</div>
--- some extra code---

这是我的 new.js.erb

$("#modal-window").html("<%= j (render partial: 'new' ) %>");

所以模态显示正确，但客户端验证不起作用，我阅读了这个 gem 的文档并展示了这个解决方案： https://github.com/DavyJonesLocker/client_side_validations/wiki/Bootstrap-Modal-Validations

$(document).on 'shown.bs.modal', '.modal', ->
  $('form[data-client-side-validations]').enableClientSideValidations()

但我不知道在哪里添加此代码，我想将其添加到 js 中而不是 coffe 中。有人可以告诉我如何将此代码转换为 js 以及我应该在哪个文件夹或文件中添加此代码？或者如果您有其他解决方案。谢谢

我正在使用：gem 'rails'，'~> 5.0.3'，

gem 'bootstrap-sass', '3.3.7'

【问题讨论】：

标签： javascript ruby-on-rails ruby twitter-bootstrap bootstrap-modal

【解决方案1】：

在您的app/assets/javascript/application.js 中，您可能是require_tree .，这意味着如果您创建一个名为boostrap_client_side_val.js 之类的新文件，您可以简单地粘贴它，它应该可以工作。

$(document).on('shown.bs.modal', function() {
  $('form[data-client-side-validations]').enableClientSideValidations();
}).modal('show');

【讨论】：

我在 app/assets/javascript/application.js 中添加了代码，但还没有结果，如果我使用 turbolinks 它会起作用吗？或者我应该改变什么？
您可能需要将其包装在$(document).on('turbolinks:load', function() { CODEHERE })
应该写在 $(document).on('shown.bs.modal', function() { ... ? 如果它已经在 $(document).on...

【解决方案2】：

我知道这已经过时了，但也许这会让人省去一些心痛。默认情况下，此 gem 仅启用/验证 VISIBLE 表单，因此模式和选项卡很痛苦，因为它们在事件显示.bs.modal 和显示.bs.tab 被触发（通常在您的 JS 运行之后）之前是不可见的。在反复摆弄绑定之后，我发现这是最简单的解决方案……只需覆盖 gem 的选择器，这样它就可以启用和验证隐藏的表单。

// my-client-side-validations-initializer.js

window.ClientSideValidations.selectors = {
    inputs: ':input:not(button):not([type="submit"])[name]:enabled',
    validate_inputs: ':input:enabled[data-validate]',
    forms: 'form[data-client-side-validations]'
}

【讨论】：